NEW ARTICLE
Rocky Linuxでのファイルシステムの暗号化
  1. HOME
  2. javascript
  3. 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」が発生した場合の対処法

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

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.134
Javascript サンプル集はこちら

エラー全文

以下のコードを実行に発生
※その他のパターンは後述してます。

<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のバージョンが「103」では、以下のエラーとなります。

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

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

Uncaught TypeError: txt is null

原因

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

対処法

「js」を「html」より下部に記述するか、

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

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

</script>

「window.onload」で全てのコードが読まれた後に「js」を実行させる方法があります。

<script>

  window.onload = function(){
    let txt = document.getElementById("txt");
    txt.innerHTML = "test";
  }

</script>

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

その他のパターン

要素が存在しない

そもそも、指定した要素が存在しない場合も発生します。

<p id="txt"></p>

<script>
  
  let txt = document.getElementById("noelm");

  txt.innerHTML = "test";
　// Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

</script>

firefox102では以下のエラーとなります。

Uncaught TypeError: txt is null

存在チェックをすれば、存在しない要素に対して実行されないためエラーは発生しません。

let txt = document.getElementById("noelm");

if( txt !== null ){

    txt.innerHTML = "test";

}