Loading javascript in body onload with 2 functions

2019-02-13 09:28发布

站内问答 / JavaScript
1420 4 4

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?

4条回答
冷血范
2楼-- · 2019-02-13 10:03

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.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-02-13 10:05

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>
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
4楼-- · 2019-02-13 10:10

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>
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
5楼-- · 2019-02-13 10:28

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)