BinaryDevelop
  1. ホーム
  2. フロントエンド
  3. js

Uncaught TypeError: nullのプロパティ'addEventListener'を読み取れない 考えられる問題

2022-01-21 05:44:11

まず、何が起こったかを説明します。今日、気まぐれでbサイトを開き、ビデオに従って簡単に小さなデモを作ろうとしたのですが、最初のページのjsを書いた直後からエラーが出るようになりました。 null のプロパティ 'addEventListener' を読み取ることができません。 コードは以下の通りです。

エントリ.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=". /js/entry.js"></script>
</head>
<body>
    <input type="text" id="username" placeholder="Please enter a username">
    <button id="enter">Enter the chat room</button>
</body>
</html>

entry.js 

;((doc, storage, location) => {
    const oUsername = doc.querySelector("#username");
    const oEnterBtn = doc.querySelector("#enter");

    const init = () => {
        bindEvent();
    }

    function bindEvent() {
        oEnterBtn.addEventListener('click', handlerEnterBtnClick, false);
    }

    function handlerEnterBtnClick() {
        const username = oUsername.value.trim();

        if(username.length < 6) {
            alert('Username must not be less than 6 digits');
            return;
        }

        storage.setItem('username', username);
        location.href = 'index.html';
    }

    init();

})(document, localStorage, location);

そして、ブラウザーを開き、習慣でコンソールを開くと、このようなエラーレポートが表示されました。

その後、entry.jsにアクセスして、何か単語のスペルを間違えていないかよく確認したのですが、長い時間探しても何も見つからず、業を煮やして、続けて最初から一語ずつ見てみましたが、やはり何もエラーは見つかりませんでした。ふと、entry.jsが即時実行の関数として書かれているのを発見し、もしかして、まだページが読み込まれていない段階で、このjsがすでに実行されているから、エラーを報告するのでは？推測にしたがって、entry.jsを変更してみましたが、やはりエラーになりました。そこで、導入した場所への変更を元に戻してみたところ

 そして実際に動作しているので、ページの読み込みが終わらないときにこのリスニングjsのコードがすでに実行されていたため、このコードが実行された時点ではリスニングDOMノードが作成されておらず、リスニングエレメントが見つからずnullを返さなければならなかったようです。

解決策は、ページの読み込みが完了するのを待ってからjsコードを実行することです。ネイティブjsでは、スクリプトを一番下に配置します。

関連

最新

おすすめ

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