I have a js function which looks like this
function showProducts(){
document.getElementById("shopList").innerHTML = "<ul><li>Test Text</li></ul>";
}
It's a function that has to show an array of my products. I've made an div with id="shopList" in my html page
<div id="shopList">
</div>
But how can I call the function to show me the text in the div? It works when I use this as my body tag but I'm not allowed to write any js code in my html or to use onload or onclick. I'm trying to do it with listeners for almost 4 hours and I still did not find a solution. Could someone help me?
<body onload="showProducts()">
7 Answers 7
Using pure javascript:
window.onload = function(){
};
(or
function doLoad() {
//Do stuff on load
}
window.onload = doLoad;
With Jquery
$(document).ready(function(){
});
1 Comment
It's not difficult with listeners. Here is a solution (not cross-browser):
document.addEventListener("DOMContentLoaded", showProducts);
6 Comments
showProducts() you're actually calling the function. addEventListener expects a function reference, not its return value.DOMContentLoaded fires before (window) load. The latter will way for assets such as images, js and css to load too.addEventListener exists. So while the semantics are somewhat different, load should work cross-browser, as I said. :)load should work anywhere, but addEventListener won't. IE<9 won't support addEventListener or DOMContentLoaded. IE9 supports both.Really, assigning to onload is just shorthand for doing it with listeners. This should work , though I haven't tested it.
window.addEventListener("load", showProducts);
With Jquery you could do something like this :
$(document).ready(function(){
showProducts();
});
It waits untill the page is loaded and then executes the function. You just put it in an external .js file and include it in your page.
(For the people downvoting this answer because it's Jquery, he said he couldn't use onload() so I just mentioned this option. )
5 Comments
window.onload().not allowed to write any js code in my html or to use onload or onclick. This is homework, and there is no need to load a 4,000 line library to do something so simple. The code to call the function is nearly bigger than the function itself.Just place the script at the bottom:
<body>
...
<script type="text/javascript">
myFunction();
</script>
</body>
Comments
John Resig's simplified version from "Pro JavaScript Techniques". It depends on addEvent.
var ready = ( function () {
function ready( f ) {
if( ready.done ) return f();
if( ready.timer ) {
ready.ready.push(f);
} else {
addEvent( window, "load", isDOMReady );
ready.ready = [ f ];
ready.timer = setInterval(isDOMReady, 13);
}
};
function isDOMReady() {
if( ready.done ) return false;
if( document && document.getElementsByTagName && document.getElementById && document.body ) {
clearInterval( ready.timer );
ready.timer = null;
for( var i = 0; i < ready.ready.length; i++ ) {
ready.ready[i]();
}
ready.ready = null;
ready.done = true;
}
}
return ready;
})();
window.onload would work, but it is a different beast. jQuery's $(document).ready() is much more complex and better in most scenarios.
Comments
Given your criteria of "no script in the HTML" and "no onload or onclick listener", you can put the function into a separate file and run it from a script element at the foot of the page:
<script type="text/javascript" src="showproducts.js"></script>
so now you have no script in the page and no listeners. The code will be executed when the element is added to the DOM, so as long as it is after the related DIV, you're fine.
Incidentally, you don't even need a function, you can just put the statements from the function body into the file.
<script>element that includes your JS (whether in an external file or inline) at the bottom of the body then you can just callshowProducts()directly without any event handlers because by the time it runs your div element will have been parsed (and thus can be accessed from JS). Or is your question really "How do I use.addEventListener()?"