Why is document.GetElementById returning null [duplicate]

I've been using document.GetElementById() successfully but from some time on I can't make it work again. look at the following Code:

    <html>
    <head>
     <title>no title</title> 
     <script type="text/javascript">
     document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
     </script>
    </head>
    <body>
     <div id="ThisWillBeNull"></div>
    </body>
    </html>

I am getting document.getElementById("parsedOutput") is null all the time now. It doesn't matter if I use Firefox or Chrome, or which extensions I have enabled, or what headers I use for the HTML, it's always null and I can't find what could be wrong.

You can use the script tag like this:

<script defer>
    // your JavaScript code goes here
</script>

The JavaScript will apply to all elements after everything is loaded.

Try this:

 <script type="text/javascript">
  window.onload = function() {
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
  }
 </script>

Without window.onload your script is never invoked. Javascript is an event based language so without an explicit event like onload, onclick, onmouseover, the scripts are not run.

<script type="text/javascript">  
  window.onload = function(){  
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";  
  }
</script>

Onload event:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

https://developer.mozilla.org/en/DOM/window.onload

Why is document.GetElementById returning null [duplicate]

Related

Recent Posts