Why is document.GetElementById returning null

Question

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.

In my case a web page created new `id` every time I restarted the web page. — CoolMind, Feb 09 '22 at 22:12

score 67 · Answer 1 · edited Nov 27 '21 at 11:40

67

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.

edited Nov 27 '21 at 11:40

Matthias Braun

32,039
22
142
171

answered Apr 13 '10 at 18:34

steve_c

6,235
4
32
42

score 42 · Answer 2 · answered Apr 13 '10 at 18:35

42

Try this:

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

answered Apr 13 '10 at 18:35

Sarfraz

377,238
77
533
578

score 12 · Answer 3 · answered Apr 13 '10 at 18:43

12

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

answered Apr 13 '10 at 18:43

Christopher Altman

4,868
2
33
49

1

*"`without an explicit event [...] the scripts are not run`"* I disagree. If the scripts really did not run, then **(1)** Why did OP get the warning `... is null`? **(2)** You'd have to specify the event in some way like `` because `window.onload = ...` is part of the script too and therefore would not run. ¶ I think this [answer](https://stackoverflow.com/a/2632185/6770384) formulated the problem better. – Socowi Aug 27 '21 at 09:42

score 6 · Answer 4 · answered Apr 13 '10 at 18:34

6

Timing.

The document isn't ready, when you're getting the element.

You have to wait until the document is ready, before retrieving the element.

answered Apr 13 '10 at 18:34

Cheeso

189,189
101
473
713

score 5 · Answer 5 · answered Apr 13 '10 at 18:35

The browser is going to execute that script as soon as it finds it. At that point, the rest of the document hasn't loaded yet — there isn't any element with that id yet. If you run that code after that part of the document is loaded, it will work fine.

score -2 · Answer 6 · answered Apr 13 '10 at 18:47

-2

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

Use += to assign more eventHandlers to onload event of document.

answered Apr 13 '10 at 18:47

Tarik

79,711
83
236
349

2

This didn't do anything for me. – Mixxiphoid Nov 13 '15 at 19:51

Why is document.GetElementById returning null

6 Answers6

Linked

Related