Loading javascript in body onload with 2 functions

Question

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?

you should really avoid inline handlers. they make your code unmantainable. Anyway apparently you have no syntax errors — Fabrizio Calderan loves trees, Apr 12 '12 at 11:25
See also: [Why Inline CSS And JavaScript Code Is Such A Bad Thing](http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/). Also, accessing forms directly as properties of `document` is non-standard. Access them as properties of `document.forms`, and elements as properties of the form's `elements` property (e.g. `document.forms.form1.elements.HotelId`) or directly by ID (e.g. `document.getElementById('HotelID')`, assuming the input named 'HotelID' was also given the same ID). — outis, Apr 12 '12 at 11:27
Not sure if it makes any difference but the two functions do an AJAX request. — Paul Clubs, Apr 12 '12 at 11:42
@outis +1, inline javascript sucks. See also the related question `What is Unobtrusive Javascript in layman terms?` on http://stackoverflow.com/questions/4478795/what-is-unobtrusive-javascript-in-layman-terms — Adrien Be, Sep 30 '14 at 07:58

score 20 · Answer 1 · answered Apr 12 '12 at 11:37

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

score 8 · Answer 2 · answered Apr 12 '12 at 11:33

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>

score 2 · Answer 3 · edited May 23 '17 at 10:29

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.

score 0 · Answer 4 · answered Apr 12 '12 at 11:33

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>

That's really ugly stuff you're doing here. See http://stackoverflow.com/questions/4478795/what-is-unobtrusive-javascript-in-layman-terms — Adrien Be, Sep 30 '14 at 07:56

Loading javascript in body onload with 2 functions

4 Answers4

Linked