Loading javascript in body onload with 2 functions

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

<body onLoad="getSubs(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);getTags(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);">

Whenever I load using 2 functions the first one aborts - but if I just load the one it works fine - am I doing something wrong is it no possible to put 2 functions within the onload?

Answers:

Answer

try this:

<html>
<head>
<script language="javascript">
function func1(){
    //the code for your first onload here
    alert("func1");
}
function func2(){
    //the code for your second onload here
    alert("func2");
}
function func3(){
    //the code for your third onload here
    alert("func3");
}
function start(){
    func1();
    func2();
    func3();
}
</script>
</head>
<body onload="start()">
</body>
</html>

Multiple onload

Answer

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>
Answer

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

<script src="./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:

<script type="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.

Answer

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>
    <body onload="callStart();callAgain();">
        <script type="text/javascript">
            function callStart() {
                alert('First');
            }
            function callAgain() {
                alert('Again');
            }
        </script>
    </body>
</html>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.