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?
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?
Share Improve this question asked Oct 27, 2009 at 21:59 Andrej MarinicAndrej Marinic 479 bronze badges6 Answers
Reset to default 11You'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.
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.