javascript エラー「Uncaught TypeError: Cannot set property ‘innerHTML’ of null」が発生した場合の対処法

javascript エラー「Uncaught TypeError: Cannot set property ‘innerHTML’ of null」が発生した場合の対処法

javascriptでエラー「Uncaught TypeError: Cannot set property ‘innerHTML’ of null」が発生した場合の原因と対処法を記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 102.0.5005.63

エラー全文

以下のコードを実行に発生

<script>

    let txt = document.getElementById("txt");
    txt.innerHTML = "test";

</script>

<body>
    <div class="container">
        <p id="txt"></p>
    </div>
</body>

エラーメッセージ ( chrome 89 )

Uncaught TypeError: Cannot set property 'innerHTML' of null

chromeのバージョンが「102」では、以下のエラーとなります。

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

firefox 100 の場合は、以下のエラーが発生します。

Uncaught TypeError: txt is null

原因

htmlは上から順番に読み込まれているため、jsが読まれた時点では、下にある「pタグ」は、まだ認識されていない状態なため

対処法

jsをページ下部に記述するか、

<body>
  <div class="container">
    <p id="txt"></p>    
  </div>
</body>
<script>
  
  var txt = document.getElementById("txt");
  txt.innerHTML = "test";

</script>

全てのコードが読まれた後にjsを実行させる方法がある

<script>
  window.onload = function(){
    var txt = document.getElementById("txt");
    txt.innerHTML = "test";
  }
</script>
<body>
  <div class="container">
    <p id="txt"></p>    
  </div>
</body>