Regarding window.onload in javascript

Question

I'm taking a introduction javascript class and for one of our labs we were instructed to have only ONE script tag in the head section but gets delayed by the window.onload event handler.

I got everything to work but my question is why do my imageManipulator() function only work when I do window.onload = function() { imageManipulator() }; and the other 2 works fine without the {}.

Also for my if statement to loop through the hockey teams why won't == 0 work? I thought 0 is true -1 is false so shouldn't it be == 0 and not >= 0?

My code is here:

<html>
<head>
<script>
    function christmasDayCalculation()
    {
        var currentDate = new Date();
        var christmas = new Date(2016, 11, 25);

        var ms = christmas - currentDate;
        var seconds = ms / 1000;
        var minutes = seconds / 60;
        var hours = minutes / 60;
        var days = hours / 24;

        alert(Math.round(days) + " days until christmas");
    }

    function hockeyTeams()
    {
        var hockeyTeams = ['Anaheim Ducks', 'Arizona Coyotes', 'Calgary Flames', 'Edmonton Oilers', 
                       'Los Angeles Kings', 'San Jose Sharks', 'Vancouver Canucks', 'Colorado Avalanch',
                       'Dallas Stars', 'Minnesota Wild', 'St.Louis Blues', 'Winnipeg Jets', 'Boston Bruins', 
                       'Buffalo Sabres', 'Detroit Redw Wings', 'Florida Panthers', 'Montreal Canadiens', 
                       'Ottowa Senators', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Colombus Blue Jackets', 
                       'New Jersey Devils', 'New York Islanders', 'New York Rangers', 'Philadelphia Flyers', 
                       'Pittsburgh Penguins', 'Washington Capitals']

        for(i = 0; i < hockeyTeams.length; i++)
        {
            if(hockeyTeams[i].indexOf("an") >= 0)
            {
                alert(hockeyTeams[i]);
            }
        }
    }

    function imageManipulator()
    {
        var numberOfImages = document.images.length;

        for(i = 0; i < numberOfImages; i++)
        {
            document.images[i].style.border = "solid red"; // DOM 0 required per lab instructions
            document.getElementsByTagName("img")[i].style.width = "100px"; // DOM 1 required per lab instructions
        }
    }

    window.onload = christmasDayCalculation();
    window.onload = hockeyTeams();
    window.onload = function() { imageManipulator() };
</script>
</head>
<body>
    <img src="cat.jpg">
    <img src="dog.jpg">
    <img src="bird.jpg">
</body>
</html>

Thanks!

Barmar · Accepted Answer · 2016-05-06 15:41:04Z

1

Running something in window.onload ensure that all the DOM elements will be loaded before the function runs. You need to use this if the function accesses or modifies the DOM.

christmasDayCalculation() and hockeyTeams() don't access the DOM, so they don't need to be run in window.onload. You're not actually running them when the window is loaded, because you didn't put function() around them. When you do

window.onload = hockeyTeams();

it runs the function immediately, and then assigns the value that it returns to window.onload.

When you write

window.onload = function() { imageManipulator(); };

That doesn't run imageManipulator() immediately, it creates a function that will call it. You could also write:

window.onload = imageManipulator;

Notice that there's no () after the function name. That sets the variable to a reference to the function, rather than calling the function.

Finally, it makes no sense to assign to window.onload multiple times. This is a single property, it can only hold one value. The repeated assignments replace the previous value, and when the document is loaded it will only execute the last one. If you want to do multiple things, you should combine them into a single function:

window.onload = function() {
    christmasDayCalculation();
    hockeyTeams();
    imageManipulator();
};

For your second question, indexOf() returns the position of the found element in the array, or -1 if it's not found. So if you used == 0, it would not be true for New York Islanders, because indexOf() returns 12, not 0. indexOf doesn't return a true/false value, it returns a position.

edited May 6, 2016 at 15:41

answered May 6, 2016 at 2:45

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

2 Comments

SC.Cee Over a year ago

Got it, thanks for the clarification and also the last part makes a lot more sense now!

Jeremy J Starcher Over a year ago

This is a single variable --> This is a single property

Collectives™ on Stack Overflow

Regarding window.onload in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related