Why is document.GetElementById returning null [duplicate]

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
– CoolMind, Commented Feb 9, 2022 at 22:12

Matthias Braun · Accepted Answer · 2021-11-27 11:40:08Z

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, 2021 at 11:40

Matthias Braun

34.8k27 gold badges158 silver badges177 bronze badges

answered Apr 13, 2010 at 18:34

steve_c

6,2954 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarfraz · Accepted Answer · 2010-04-13 18:35:40Z

Try this:

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

Christopher Altman · Accepted Answer · 2010-04-13 18:43:45Z

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

"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 <script event="...">...</script> because window.onload = ... is part of the script too and therefore would not run. ¶ I think this answer formulated the problem better.

Cheeso · Accepted Answer · 2010-04-13 18:34:23Z

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.

Syntactic · Accepted Answer · 2010-04-13 18:35:44Z

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.

Tarik · Accepted Answer · 2010-04-13 18:47:07Z

<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.

Collectives™ on Stack Overflow

Why is document.GetElementById returning null [duplicate]

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Linked

Related