Menu
Why does refButton get null in the following JavaScript code?
<html> <head> <title></title> <script type="text/javascript"> var refButton = document.getElementById("btnButton"); refButton.onclick = function() { alert('I am clicked!'); }; </script> </head> <body> <form id="form1"> <div> <input id="btnButton" type="button" value="Click me"/> </div> </form> </body> </html> 
426
You can call getElementById multiple times and it will work.
This can happen if the JavaScript code is executed before the page is fully loaded, so its not able to find the element. The solution is that you need to put your JavaScript code after the closure of the HTML element or more generally before < /body > tag.
You should opt to use the querySelector method if you need to select elements using more complex rules that are easily represented using a CSS selector. If you want to select an element by its ID, using getElementById is a good choice.
At the point you are calling your function, the rest of the page has not rendered and so the element is not in existence at that point. Try calling your function on window.onload maybe. Something like this:
<html> <head> <title></title> <script type="text/javascript"> window.onload = function(){ var refButton = document.getElementById("btnButton"); refButton.onclick = function() { alert('I am clicked!'); } }; </script> </head> <body> <form id="form1"> <div> <input id="btnButton" type="button" value="Click me"/> </div> </form> </body> </html> You need to put the JavaScript at the end of the body tag.
It doesn't find it because it's not in the DOM yet!
You can also wrap it in the onload event handler like this:
window.onload = function() { var refButton = document.getElementById( 'btnButton' ); refButton.onclick = function() { alert( 'I am clicked!' ); } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
