Please help me
I want to use JavaScript to click the LINK on this html code:
<form id="xForm" method="post" action="">
<table>
<tr id="abc">
<td class="goTo" id="goToLINK">
<a class="gotoLINK arrow" href="start.php?from=list&kid=123">LINK</a>
</td>
</tr>
</table>
</form>
document.getElementsByClassName("gotoLINK")[0].click();
MDN reference
It works on all browsers that supports JavaScript and follows the HTML5 spec, including Internet Explorer and Firefox.
However, now it is supported by all elements, as required by HTML5.
document.getElementById('goToLINK').children[0].click()
document.getElementsByClassName("gotoLINK")[0].click();
But remember that this method doesn't work on Firefox (as far as I know) for security questions and its not recommended to use it because it can be annoying to the page guest
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
My JavaScript in .php (static website) file doesn't work. I use there 3 other scripts and they do work, but not this one.
The situation is simple
The JavaScript is:
var myFile = document.getElementById('myFile');
myFile.addEventListener('change', function() {
alert(this.files[0].size);
});
and the HTML code in the PHP file is (stripped):
<form onsubmit="return anotherfunction();" action="sendForm.php" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>Attach an image:</td>
<td> <input type="file" name="priloha[]" accept="image/*" /></td>
</tr>
</table>
</form>
And the JavaScript does nothing, it acts like it doesn't exist. I tried to use the JS in the header, below the header, in the body, in the TD of the input... I also tried using it in external .js file, nothing, doesn't work at all. I tried changing "change" to "click", didn't work neither. I tried to do this all day and I can't figure out what's wrong.
So I tried to do much simpler code to check what's wrong and it seems like change or onchange - the second line of the JS doesn't work.
I also tried to specify HTML5 doctype, doesn't do a thing.
My extra .html file to try even simpler code looks like this and of course doesn't work...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Input field for click popup:</td>
<td>
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('click', function() {
alert("Hello");
});
</script>
<input type="text" id="input" />
</td>
</tr>
<table>
</body>
</html>
Help me please, I don't really know what's this...
I forgot to mention, I tried different browsers - Opera 12.15, latest Firefox and Chrome, didn't work in any case. But it works in fiddle...
Put the script right at the end of the body, right before the </body> end tag.
Scripts are loaded synchronously where they are placed, so any script put in before the element in question will not be aware of the element's existence.
Also, what Igor said.
You don't have a DOM element with id "myFile" in html that you included.
So I'm trying to make a table hidden when the webpage opens but when a is clicked it should show but I'm having problems with IE9. I read that IE8 and below do not support setAttribute and my webpage seems to work correctly with Firefox. Here is the code, just wondering if anyone could help me out:
<h1 onclick="myFunction()">Show Sitemap</h1>
<table id="myInput" style="visibility:hidden;" width="100%" height="50%">
<tr><td><p>Test</p></td></tr>
</table>
<script>
function myFunction()
{
document.getElementById("myInput").setAttribute("style","visibility:visible;");
};
</script>
Try using
function myFunction()
{
document.getElementById("myInput").style.visibility = "visible";
};
instead, as IE is more compatible with this.
Fiddle:http://jsfiddle.net/E396D/
I tried this in IE10 with compatibility mode on and it worked (the original didn't).
I have the following code:
<td bgcolor="#FF0000"><center>
<? echo $rows['msisdn']; ?>
</td>
<td align="center" bgcolor="#FFFFFF">
<a href="control_clientinfo.php?member_id=<? echo $rows['member_id']; ?>"
class="update">Look Up</a>
</td>
This draws data from mysql for me and does what it needs to do, question
<td bgcolor="#FF0000">
<center>
<? echo $rows['msisdn']; ?>
</td>
How do I change that background colour once the link has been visited. I know how to change the visited link colour but i want to change the table viewed colour.
Is this possible or am I biting into a rock?
Nothing much to do with PHP I'm afraid, more of a Javascript problem.
Try Remy Sharp's jQuery plugin http://remysharp.com/2008/02/25/visited-plugin/
Identical code is in this answer https://stackoverflow.com/a/1791790/932508
Updated Answer
The browser controls the visited link status, there's no way to determine this with Javascript or CSS for the security of users. This may have worked in the past, but no longer works on all modern web browsers. -- This is done to prevent history tracking by the browsers themselves. The only workaround for this would be to track which links were clicked using Javascript event handlers and if you want this information persistant across multiple page-loads/refreshes, you'll need to set a cookie.
For current page, you could use Javascript (or better yet, jQuery) to change the color of your background.
Using jQuery:
$("td a").click(function() {
$(this).parent("td").addClass('clicked');
});
On a related note, I highly recommend NOT using <center> and the bgcolor and align attributes. Those have long been deprecated in recent HTML versions. Consider using CSS for all of your "center" and styling/background color needs.
Add onclick function in table column with anchor tag
<td align="center" bgcolor="#FFFFFF" onclick="document.getElementById("demo").style.backgroundColor="RED";"> Look Up</td>
Then add an Id tag to other table column for which you want to change background color.
<td id="demo" bgcolor="#FF0000">
<center>
<? echo $rows['msisdn']; ?>
</center>
</td>
hey Guys,
I am trying to write dynamic html bean using java script
but I keep geting the "function is not found" JS error when I press the button ..
here is a sample code
<html>
<html:form action="loginAction.do" >
<head>
<script type="text/javascript">
function test(){
document.getElementById('dd').innerHTML =
"<html:text property='pid'/>";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<input type="button" value="addprod" onclick="test()"/>
</td>
</tr>
<tr>
<td align="center">
<div id="dd"></div>
</td>
</tr>
</table>
</html:form>
</body>
</html>
I don't know about the
<html:form action="loginAction.do" >
where it should be located
I tried to locate it within the <body>
but I got a big exception due to writing <html:text property='pid'/> in JavaScript outside the <html:form>
...
need your help,
Regards,
I think struts is trying to parse the <html:text /> as a tag in your script, rather that just a javascript string. Try moving the <html:form action="loginAction.do" > into the body AND the <script> within the <html:form> similar to this fiddle http://www.jsfiddle.net/pL4Aq/1/
However, it works in the fiddle because it is just straight HTML... I don't think what you are trying to do will work. <html:text > is a custom tag that gets processed on the server, does a bunch of stuff, and then generates HTML for you. You will never actually see <html:text> if you view the source from your browser, even though it is in your jsp.
You might want to try changing the <html:text > to a straight <input type="text"> tag (in which case, you could just move the <html:form> into the body and leave the script where it is).
I am completely agreed with what Mike is saying.
Writing <html:text> inside javascript is useless since javascript is executing on client side while struts is required to translate this tag to html tag.
Better to write <input type="text"> inside javascript and keeps its name as "prop" if you want struts to fill the value of that text inside the form bean property "prop". Keep the <html:form in body tag. This will work for you.
It should work in a <body> tag.
$('#main-mission .fade').animate({opacity:1.0;filter:alpha(opacity=100);}, { queue:true, duration:2000 }).animate({opacity:1.0;filter:alpha(opacity=100);}, 1500).animate({opacity:0.0;filter:alpha(opacity=0);}, 800,'linear',function(){
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>"); }).animate({opacity:1.0;filter:alpha(opacity=100);}, 2000);
...thats my jquery,
<div id="main-mission">
<table><tr height="28"><td width="11"></td><td width="475" style="height: 75px;" class="boxed"><div class="fade" style="opacity:0.0;filter:alpha(opacity=0)"><font size="4"> The Spare Our Green Mission ...</font><br><br></div> </td></tr></table>
</div>
and that is the HTML. I'm not quite sure why it isn't, working... could someone please help?
Thanks.
You have used semi-colons where you should have used commas to separate the css attributes being animated. Also you don't need to try and add IE support with filter attribute. Try this code, tested in FF3.5 and IE8
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#main-mission .fade')
.animate({opacity:1.0}, {queue:true,duration:2000})
.animate({opacity:1.0}, 1500)
.animate({opacity:0.0}, 800,'linear',function()
{
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>");
})
.animate({opacity:1.0}, 2000);
});
</script>
</head>
<body>
<div id="main-mission">
<table>
<tr height="28">
<td width="11"></td>
<td width="475" style="height: 75px;" class="boxed">
<div class="fade" style="opacity:0.0;filter:alpha(opacity=0)">
<font size="4"> The Spare Our Green Mission ...</font>
<br>
<br>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Have you tried removing parts of the chain down to the first element and then adding them back in one at a time to see what is broken? It's a long function call to try and read and parse.
I think that the non numerical values should be in quotes like filter:"alpha(opacity=0)";.
What error message are you getting (from firebug, i.e.)?
-- edit
Btw. IE8 is using -ms-filter for opacity now.
I agree with Paddy. You should write a simpler version of your code and then try it out. Make only one call to $.animate(). Once you get that working, then add in the callback. Once that works, then add the chaining.
Also note that you should not use the <font> tag. It is not valid HTML.