新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【JavaScript 】DOMノードへのイベント定義にて、JavaScript 実行時エラー: 未定義または NULLとなる場合の対処

■今回の内容


JavaScript 実行時エラーで落ちたのでその対応をメモ

■内容

事象  :DOMノードへのイベント追加時に、JavaScript 実行時エラー: 未定義または NULLとなる場合の対処
理由  :DOMノードが定義する前にイベントを追加しようとしているため、イベントを追加するDOMが未定義でおちる
対処方法:読み込みが完了してから、処理を実行する




<script type="text/javascript">
   //ここに記述すると上記のエラーとなる
   // var button = document.getElementById("TextBox1");
   // button.addEventListener("click", test, false);
   

    document.onreadystatechange = function () {
        if (document.readyState == "loading") {
            console.log("loading");
        }
        if(document.readyState=="interactive") {
            console.log("interactive");
        }
        if (document.readyState == "complete") {
            //正しくはこっちに書く
            console.log("complete");
            var button = document.getElementById("TextBox1");
            button.addEventListener("click", test, false);

        }
    }
    function test(){
        alert("");
    }

参考:https://developer.mozilla.org/ja/docs/Web/API/Document/readyState
   http://js.studio-kingdom.com/javascript/event_target/add_event_listener

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }