1

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()">
Improve this question
2
  • I'd prefer using jquery.. much easier. Commented May 15, 2012 at 1:41
  • If you can't write JS in your html, does that mean your JS is included in an external file? If you put the <script> element that includes your JS (whether in an external file or inline) at the bottom of the body then you can just call showProducts() 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()?" Commented May 15, 2012 at 1:51

7 Answers 7

Reset to default
6

Using pure javascript:

window.onload = function(){

};

(or

function doLoad() {
    //Do stuff on load
}

window.onload = doLoad;

With Jquery

$(document).ready(function(){   

});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

OP says that onload is disallowed.
1

It's not difficult with listeners. Here is a solution (not cross-browser):

document.addEventListener("DOMContentLoaded", showProducts);
Improve this answer

6 Comments

When you use showProducts() you're actually calling the function. addEventListener expects a function reference, not its return value.
I believe the standard event name 'load' should work cross-browser. I also prefer to attach the listener to the window instead of the document, but I don't think it matters in practice.
@MarkReed, I believe they're not the same. DOMContentLoaded fires before (window) load. The latter will way for assets such as images, js and css to load too.
@bfavaretto: right, but as you said, DOMContentLoaded is not cross-browser. Whereas "load" should work anywhere that addEventListener exists. So while the semantics are somewhat different, load should work cross-browser, as I said. :)
@Mark, you're right that load should work anywhere, but addEventListener won't. IE<9 won't support addEventListener or DOMContentLoaded. IE9 supports both.
|
1

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);
Improve this answer

2 Comments

Assigning a function to window.onload is a listener.
Yes, but not explicitly. That's what I meant by "shorthand"- the difference is purely syntactic, while exactly the same thing is going on under the covers.
1

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. )

Improve this answer

5 Comments

if you don't know how to use JQuery, you have to include this ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js as a javascript file to your page. Here's the tutorial : docs.jquery.com/Tutorials
Hi glenn, in general, we try not to give jQuery-only answers on questions that are not tagged jQuery. While we all love jQuery, there are situations where we just plain can't use it, like for instance, when working on a JavaScript homework assignment where the use of a library is not allowed. With that said, I thin it would be acceptable for you to show jQuery as an aside, just not as your main answer. Good luck!
I completely understand, but I gave the jquery option because he can't use window.onload().
Sure, I understand. If you can, try to see if you can find a pure JavaScript solution. You can always edit your answer to improve it. Good luck :)
Read the OP: 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.
1

Just place the script at the bottom:

<body>
    ...
    <script type="text/javascript">
        myFunction();
    </script>
</body>
Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments