Skip to content Skip to sidebar Skip to footer

Loading Javascript In Body Onload With 2 Functions

I am trying to load 2 javascript events/functions in the body onload as follows :- Copy

Multiple onload

Solution 2:

Just do it from java script instead, one of the link shared into a comment explains well why it is best to use this approach over inline attributes.

<head><script>document.body.onload = function() {
getSubs(...);
getTags(...);
};
</script></head><body>
...
</body>

Solution 3:

I would avoid at all cost to have inline javascript, that is what you did in the code of your question: add javascript within an HTML attribute.


Best practice is to add your javascript in a separate file, see the related question on this principle What is Unobtrusive Javascript in layman terms?

So you'd have an other file called for instance "myjsfile.js", then you reference it from your HTML page

<scriptsrc="./path/to/your/myjsfile.js"></script>

Here is the answer to where to place this reference: Where to place Javascript in a HTML file?

Your "myjsfile.js" file would simply have:

window.onload =  function(){
    getSubs(...);
    getTags(...);
};

Another thing to avoid: add javascript within the same HTML file. The reason is also based on the same principle of unobstrusive javascript. What is Unobtrusive Javascript in layman terms?

But I guess there are corner cases where you may want to do that.

If you really have to, do use window.onload instead of the inline javascript onload="...", see why here window.onload vs <body onload=""/>

Just add the following to your HTML file:

<scripttype="text/javascript">window.onload =  function(){
        getSubs(...);
        getTags(...);
    };
</script>

Here is the answer to where to place this code: Where to place Javascript in a HTML file?

Note: Yes, in the same place as where you would put the reference to an external javascript file


Another thing: I do not know where your getSubs() and getTags() functions are defined. But if you want your code to work, it needs to call these functions after the file (or part of javascript) that defines them has been loaded.

In short: make sure the javascript file containing the definitions of getSubs() and getTags() is referenced before your code.

Solution 4:

One thing that you could do is create a new JS function that accepts the document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value parameter and call the two functions in the newly created function.

I tried calling two functions using the below code and it worked fine for me.

<html><bodyonload="callStart();callAgain();"><scripttype="text/javascript">functioncallStart() {
                alert('First');
            }
            functioncallAgain() {
                alert('Again');
            }
        </script></body></html>

Post a Comment for "Loading Javascript In Body Onload With 2 Functions"