My onload listener doesn't seem to be working
Question
I know I am missing something here, but my page isn't working right...
I have a simple init() function tied to window.onload . init() is firing but I get a weird error such as that it cannot read the DOM element itself. I can just pop into Firebug and run init(); from the console and that does work properly. It appears I am not using the proper onload listener. Is there a better one? Also, perhaps this is due to my use of document.getElementsByClassName() .
Here is the error (and then me putting init() into the console):
Here is my relevant code:
... // There is more code, I just didnt include it.
window.addEventListener("onload", init(), false);
function init(){
populateText();
populateLinks();
populateIcons();
}
function populateText(){
var texts = document.getElementsByClassName("text");
for (i = 0; i < data.links.length; i++) {
texts[i].innerHTML = data.links[i].text;
}
}
function populateLinks(){
var links = document.getElementsByClassName("link");
for (i = 0; i < data.links.length; i++) {
links[i].href = data.links[i].link;
}
}
function populateIcons(){
var icons = document.getElementsByClassName("icon");
for (i = data.links.length; i > 0; i--) {
icons[(data.links.length-i)].src = "screens/screen ("+i+").png";
}
}
</script>
</head>
<body>
<div id='iconLinks'>
<ul>
<li>
<a class="link" href="" target="_blank">
<div class="text"></div>
<img class="icon" src=""/>
</a>
</li>
<li>
<a class="link" href="" target="_blank">
<div class="text"></div>
<img class="icon" src=""/>
</a>
</li>
<li>
<a class="link" href="" target="_blank">
<div class="text"></div>
<img class="icon" src=""/>
</a>
</li>
<li>
<a class="link" href="" target="_blank">
<div class="text"></div>
<img class="icon" src=""/>
</a>
</li>
<li>
<a class="link" href="" target="_blank">
<div class="text"></div>
<img class="icon" src=""/>
</a>
</li>
... // There is more code, I just didnt include it.
2 answers
solution1
3 ACCPTED 2015-04-17 00:47:16
You need to pass function reference to addEventListener() . Also the event name is load , not onload . So the call should look like this:
window.addEventListener("load", init, false);
(You could also omit the false as third parameter, as that is the default value.)
In your case init() is called first and it's return value (which is undefined ) is then passed to the handler for the onload event.
solution2
2 2015-04-17 00:56:42
If you wanna load your function until your entire DOM load finished :
JS：
<script>
window.onload = function(){
populateText();
populateLinks();
populateIcons();
}
</script>
JQuery：
$(window).on("load", function() {
populateText();
populateLinks();
populateIcons();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.