Function called in window.onload does not recognize element

Question

I am a bit confused here. I thought that the function specified in window.onload did not execute before the page was loaded. Nervertheless, I get an error in the below code (heres the jsfiddle version):

<script>
    function updateImage(url){     
        document.getElementById("foo").src = url;
    }    
    window.onload = updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
</script>

<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />

It gives me:

Error: document.getElementById("foo") is null

When moving the image above the script all works well.

you could call it after the id, or use a dom ready function

david
– david

2011-10-11 07:50:54 +00:00
Commented Oct 11, 2011 at 7:50 — david
– david, Commented Oct 11, 2011 at 7:50

airportyh · Accepted Answer · 2011-10-11 07:56:07Z

6

window.onload expects to be a function - which it will call when the page is loaded. But what you've assigned to it is not a function. You assigned

updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");

which immediately executes the updateImage function, and since you don't have a return statement in the body of updateImage, the return value is undefined. Therefore, at the end, window.onload has the value undefined.

A solution would be to change that bit of code to:

window.onload = function(){
    updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}

This will cause it to call the function when the window has been loaded and do what you'd expect.

answered Oct 11, 2011 at 7:56

airportyh

22.8k13 gold badges61 silver badges75 bronze badges

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

Comments

Vasily · Accepted Answer · 2011-10-11 08:04:13Z

You can use trigger that will check is element loaded.

<script>

    function updateImage(url){     
        document.getElementById("foo").src = url;
    }

    function initOnLoad(sElementName) {
        var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName); 
        if(oElement != null && typeof(oElement) != "undefined") { 
            updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
        } 
        else { 
            setTimeout(function() { 
                initOnLoad(sElementName); 
            }, 0); 
        } 
    }

    initOnLoad('body');
</script>

<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />

Erik Waters · Accepted Answer · 2018-11-30 19:30:28Z

0

You have an error in your code.

window.onload = updateImage("...");

You are not assigning a function handler to the window onload. You are assigning the RESULT of the updateImage function. Which is executed immediately before image is loaded or even added to the DOM. To assign function handler you need:

window.onload = updateImage;

or

window.onload = function(){
  updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}

or by using jQuery

$(document).ready(function(){
  updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux"); 
});

edited Nov 30, 2018 at 19:30

Erik Waters

3373 silver badges15 bronze badges

answered Oct 11, 2011 at 7:57

Jan Pfeifer

2,85130 silver badges37 bronze badges

Collectives™ on Stack Overflow

Function called in window.onload does not recognize element

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related