NEW ARTICLE
java 配列からListに変換する
  1. HOME
  2. javascript
  3. javascript エラー「Uncaught TypeError: xxx.innerHTML is not a function」の解決方法

javascript エラー「Uncaught TypeError: xxx.innerHTML is not a function」の解決方法

javascript エラー「Uncaught TypeError: xxx.innerHTML is not a function」の解決方法

javascriptで、エラー「Uncaught TypeError: xxx.innerHTML is not a function」が発生した場合の原因と解決方法を記述してます。「innerHTML」を関数として利用しようとした際に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

目次

環境

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

エラー内容

以下の、id「box」に対して要素の値を変更しようとするコードで発生。

<div id="box">  
  <p>test</p>
</div>

<script>

const elm = document.getElementById('box');

elm.innerHTML('<p>change</p>');

</script>

エラーメッセージ

Uncaught TypeError: elm.innerHTML is not a function

画像

firefox106の場合でも同じエラーが発生します。

Uncaught TypeError: elm.innerHTML is not a function

画像

safari15.5では、以下のエラーとなります。

TypeError: elm.innerHTML is not a function. (In 'elm.innerHTML('<p>change</p>')', 'elm.innerHTML' is "  
  <p>test</p>
")

画像

原因

「innerHTML」は関数として使用するのではなく、値を設定して使用する

解決方法

値を設定します。

<div id="box">  
  <p>test</p>
</div>

<script>

const elm = document.getElementById('box');

elm.innerHTML = '<p>change</p>';

</script>

実行結果は「change」と表示されるだけです。