CODEWITHSUNDEEP
javascriptonload
user1395001
user1395001

Reputation:

How to call function on page load in JS?

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()">

Upvotes: 1

Views: 24169

Answers (7)

ajax333221
ajax333221

Reputation: 11774

Just place the script at the bottom:

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

Upvotes: 1

RobG
RobG

Reputation: 147513

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.

Upvotes: 0

Anonymous
Anonymous

Reputation: 572

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

Upvotes: 1

Mark Reed
Mark Reed

Reputation: 95375

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

Upvotes: 1

CDubbz31
CDubbz31

Reputation: 141

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.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71939

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

document.addEventListener("DOMContentLoaded", showProducts);

Upvotes: 1

Nivas
Nivas

Reputation: 18364

Using pure javascript:

window.onload = function(){

};

(or

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

window.onload = doLoad;

With Jquery

$(document).ready(function(){   

});

Upvotes: 6

Related Questions