web-dev-qa-db-ja.com

2つの関数を使用してbody onloadにJavaScriptをロードする

次のように、本体のonloadに2つのJavaScriptイベント/関数をロードしようとしています：-

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

2つの関数を使用してロードするときはいつでも、最初の関数は異常終了します。ただし、1つの関数をロードしただけで問題なく動作します-何か問題がありますか？onload内に2つの関数を置くことはできませんか？

javascripthtmleventsclient-server
12
Paul Clubs

これを試して：

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

複数のオンロード

15
Ashwini Verma

Javaスクリプトから実行するだけです。コメントに共有されているリンクの1つは、インライン属性に対してこのアプローチを使用するのが最適な理由をよく説明しています。

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

私は_inline javascript_を持つことを絶対に避けます、それはあなたの質問のコードであなたがしたことです：HTML属性内にJavaScriptを追加します。

JavaScriptを別のファイルに追加することをお勧めします。この原則に関する関連質問を参照してください 素人用語での控えめなJavascriptとは

したがって、たとえば「myjsfile.js」と呼ばれる他のファイルがあり、それをHTMLページから参照します。

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

この参照を配置する場所に対する答えは次のとおりです： JavaScriptをHTMLファイルに配置する場所は？

"myjsfile.js"ファイルは単に次のようになります。

_window.onload =  function(){
    getSubs(...);
    getTags(...);
};
_

回避すべきもう1つのことは、同じHTMLファイル内にJavaScriptを追加することです。その理由も_unobstrusive javascript_の同じ原理に基づいています。 素人用語で控えめなJavascriptとは何ですか？

しかし、あなたがそれをしたいと思うかもしれないコーナーケースがあると思います。

本当に必要な場合は、インラインjavascript _window.onload_の代わりに_onload="..."_を使用してください。理由はこちらをご覧ください window.onload vs <body onload = "" />

以下をHTMLファイルに追加するだけです。

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

このコードを配置する場所に対する答えは次のとおりです。 JavaScriptをHTMLファイルに配置する場所は？

注：はい、外部JavaScriptファイルへの参照を配置するのと同じ場所

もう1つ：getSubs()関数とgetTags()関数がどこで定義されているかわかりません。ただし、コードを機能させるには、これらを定義するファイル（またはJavaScriptの一部）がロードされた後で、これらの関数を呼び出す必要があります。

つまり、getSubs()およびgetTags()の定義を含むJavaScriptファイルがコードの前に参照されていることを確認してくださいbefore 。

2
Adrien Be

実行できることの1つは、document.form1.HotelID.options [document.form1.HotelID.selectedIndex] .valueパラメータを受け入れる新しいJS関数を作成し、新しく作成された関数で2つの関数を呼び出すことです。

以下のコードを使用して2つの関数を呼び出してみましたが、うまくいきました。

<html>
    <body onload="callStart();callAgain();">
        <script type="text/javascript">
            function callStart() {
                alert('First');
            }
            function callAgain() {
                alert('Again');
            }
        </script>
    </body>
</html>
0
Krishna