BinaryDevelop
  1. ホーム

JSイベントエラー報告で、プロパティ「onclick」がnullに設定できない。

2022-02-25 07:18:16 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            // get this element from the document based on the value of the id attribute
            var btnObj=document.getElementById("btn");
            // for the current button element (object), register the click event, add the event handler (anonymous function)
            btnObj.οnclick=function(){
                //response to do something
                alert("jaja");
            };
        </script>
    </head>
    <body>
        <input type="button" value="Show effect" id="btn" />    
    </body>
</html>

上記のコードが実行された後、次のように表示されます。

変更を行うには、jsファイルを の下にある 読み込み中です。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>    
    </head>
    <body>
        <input type="button" value="Show effect" id="btn" />    
        <script>
            // get this element from the document based on the value of the id attribute
            var btnObj=document.getElementById("btn");
            // for the current button element (object), register the click event, add the event handler (anonymous function)
            btnObj.οnclick=function(){
                //response to do something
                alert("jaja");
            };
        </script>
    </body>
</html>

コードが正常に実行される

理由 jsファイルをhead内に配置した場合、onclickやonmouseoverイベントがバインドされていると、上記のようなエラーが発生します。これは、ブラウザの読み込み順が、書いたhtmlドキュメントを上から下へ、jsを実行するボタンノードを読み込んだ後なので、上から下へ解析すると、onclickバインドされたボタンノードを見つけることができず、エラーが報告されるのです。

解決方法 まず、jsファイルを一番下に置いて読み込みます。次に、window.οnlοad=function(){}を使ってjsの内容をラップします。

取得元：https://www.cnblogs.com/zhangDY/p/11344502.html

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します