Loading javascript in body onload with 2 functions
Asked Answered
P

4

14

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?

Plyler answered 12/4, 2012 at 11:23 Comment(4)
you should really avoid inline handlers. they make your code unmantainable. Anyway apparently you have no syntax errorsDecretory
See also: 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).Homestretch
Not sure if it makes any difference but the two functions do an AJAX request.Plyler
@Homestretch +1, inline javascript sucks. See also the related question What is Unobtrusive Javascript in layman terms? on #4479295Pryer
B
21

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

Byplay answered 12/4, 2012 at 11:37 Comment(0)
H
8

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>
Heraldic answered 12/4, 2012 at 11:33 Comment(0)
P
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

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

Pryer answered 30/9, 2014 at 8:18 Comment(0)
B
1

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>
Belkisbelknap answered 12/4, 2012 at 11:33 Comment(2)
That's really ugly stuff you're doing here. See #4479295Pryer
working fine thoWestberry

© 2022 - 2024 — McMap. All rights reserved.