JS - Elements still null after body.onload

Question

According to this question, by the time the body onload gets called, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

I have some JS that is supposed to fire at body onload but my attempts to getElementByID are returning null which makes me think it's firing earlier than I think it is.

Am I wrong in my interpretation of body.onload or am I doing something else wrong?

Here is my code:

<script type="text/javascript"> 
    window.document.body.onload = doStuff;

    function doStuff() {
        var txtElement = document.getElementById("myTextField");

        if (txtElement != null) {
            alert(txtElement.value);
        }
        else {
            alert("Element not found!"); //This alert is always thrown
        }
    }
</script>

Answer 1

You are actually calling the doStuff function before the DOM is loaded because you have parenthesis after the function name, which causes the function to be invoked as soon as that line is encountered.

When you register a function as a callback to an event, you just want to reference the function, not invoke it. Also, you only need to register the "page" load function to the window.

Change:

window.document.body.onload = doStuff();

to:

window.onload = doStuff;

---

Additionally, you should modernize your code and, instead of using an event property of an element (which only allows for one function to be stored as a callback to an event), you should use the addEventListener() method to register callback functions.

Lastly, the type attribute is no longer necessary on script tags.

<script> 
    window.addEventListener("load", doStuff);

    function doStuff() {
        var txtElement = document.getElementById("myTextField");

        if (txtElement != null) {
            alert(txtElement.value);
        }
        else {
            alert("Element not found!"); //This alert is always thrown
        }
    }
</script>