JavaScript getElementByID not working

Question

Why does refButton get null in the following JavaScript code    lt html gt   lt head gt       lt title gt  lt  title gt       lt script type  text javascript  gt          var refButton   document getElementById  btnButton             refButton onclick   function                 alert  I am clicked                     lt  script gt   lt  head gt   lt body gt       lt form id  form1  gt       lt div gt           lt input id  btnButton  type  button  value  Click me   gt       lt  div gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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    lt html gt   lt head gt       lt title gt  lt  title gt       lt script type  text javascript  gt          window onload   function               var refButton   document getElementById  btnButton                 refButton onclick   function                     alert  I am clicked                                   lt  script gt   lt  head gt   lt body gt       lt form id  form1  gt       lt div gt           lt input id  btnButton  type  button  value  Click me   gt       lt  div gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

Because when the script executes the browser has not yet parsed the  lt body gt   so it does not know that there is an element with the specified id   Try this instead    lt html gt   lt head gt       lt title gt  lt  title gt       lt script type  text javascript  gt          window onload    function                  var refButton   document getElementById  btnButton                 refButton onclick   function                     alert  Dhoor shala                                     lt  script gt       lt  head gt   lt body gt       lt form id  form1  gt       lt div gt           lt input id  btnButton  type  button  value  Click me   gt       lt  div gt   lt  form gt   lt  body gt   lt  html gt    Note that you may as well use addEventListener instead of window onload       to make that function only execute after the whole document has been parsed

[javascript] JavaScript getElementByID() not working

Examples related to javascript

Examples related to getelementbyid