window.onload != <body onload=“”>

StackOverflow https://stackoverflow.com/questions/1633912

  •  06-07-2019
  •  | 
  •  

Question

This is rather interesting, I think. Consider following code, both the window.onload and body onload="" call the same function. However, the results are different. It appears to me that window.onload has a problem with collections. Here's the code:

<html>
<script type="text/javascript">

    window.onload = getSpanElements();

    function getSpanElements(){
        var collectionBoolean = document.getElementsByTagName("span")?true:false;
        alert(
            "collection exists? " + collectionBoolean + "; number of collection members: " + document.getElementsByTagName("span").length
        );
    }


</script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
</head>
<body onload="getSpanElements()">
    <span> test </span>
</body>

As you can see, both report that the collection exists, however window.onload reports that it has no members. Any ideas?

Was it helpful?

Solution

You're setting the function wrong:

window.onload = getSpanElements();

should be

window.onload = getSpanElements;

You're setting the onload handler to the return value of getSpanElements() at the moment.

OTHER TIPS

window.onload = getSpanElements();

should be

window.onload = getSpanElements;

The code you have calls the getSpanElements function and assigns its return value as the onload event handler.

You're wrongly doing this:

window.onload = getSpanElements();

which sets the window.onload to the result of the call to the function getSpanElements (undefined).

You should do this instead:

window.onload = getSpanElements;

You might want to move your window.onload assignment below the getSpanElements declaration:

<html>
<script type="text/javascript">


        function getSpanElements(){
                var collectionBoolean = document.getElementsByTagName("span")?true:false;
                alert(
                        "collection exists? " + collectionBoolean + "; number of collection members: " + document.getElementsByTagName("span").length
                );
        }

        window.onload = getSpanElements;

</script>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
</head>
<body onload="getSpanElements()">
        <span> test </span>
</body>

At the point in your code where you're assigning the window.onload event handler, getSpanElements() has not yet been defined. Also, the line should be

window.onload=getSpanElements;

not

window.onload=getSpanElements();

The function name without parentheses is a reference to the function. With parentheses, it executes the function and the return value is assigned to window.onload.

You have to assign a reference to the function getSpanElements to window.onload - currently, the function doesn't get executed onload, but immediately after parsing.

What you actually assign is the undefined return value.

In short: drop the ().

I think the window object is created before any actual elements are parsed.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top