【Javascript エラー対処】Uncaught TypeError: Cannot set property ‘innerHTML’ of null

プログラム

こんにちは。
今回はJavascriptで発生するエラーの対処法をシェアしたいと思います。

スポンサーリンク

エラー内容

エラーは下記になります。

Uncaught TypeError: Cannot set property ‘innerHTML’ of null
 

日本語に意訳すると、「未取得エラー:空(から)の属性タイプ”innerHTML”を設定することが出来ない」という意味になります。

具体的に例を出して、エラーの内容を説明します。

下記は、<p>のタグに”パラグラフ”と表示されるコードです。このコードの時に発生します。

<script>
document.getElementById("para1").innerHTML = "パラグラフ";
</script>
Javascriptテスト
<p id="para1">paragraph</p>

エラーの内容は、id=para1が存在していない⇒nullなので、””パラグラフ”という文字列を設定出来ないということです。

存在しないidに対して出力するとこのエラーが発生します。

しかし、上記のコードはidを設定しているので一目では何も問題ないように見えます。

エラーが発生しない場合

次にエラーが発生しない場合のコードはこちらになります。

Javascriptテスト
<p id="para1">paragraph</p>
<script>
document.getElementById("para1").innerHTML = "パラグラフ12";
</script>

この場合、よく見ると、<script>のタグが下の方に書かれています。

エラーが起こる原因

先述した通り、存在しないidに対して出力する場合に発生します。

エラーが発生したコードを見ると、5行目でid=”para1″が定義されているため、<script>実行時には存在していない事にになりエラーが発生するということです。

<script>
window.onload = function () {
document.getElementById("para1").innerHTML = "パラグラフ12";
};
</script>
<p id="para1">paragraph</p>

エラー回避策

エラー回避策としては、idが定義されるコード以降に<script>タグを貼り付ける事になります。

また、もしidが定義されるコード以降に<script>タグを貼り付ける事が出来ない場合、ページを読み込んだタイミングで<script>を実行すればいいでしょう。その場合は、下記のようにwindows.onload=function()を使用します。


<script>
 window.onload = function () {
document.getElementById("para1").innerHTML = "パラグラフ";
}; <!--セミコロンを忘れないように -->
</script>
 Javascriptテスト
<p id="para1">paragraph</p>

この場合、波括弧の最後にセミコロン;を付けるのを忘れないようにして下さい。

まとめ

いかがだったでしょうか。

コンピュータなので、少しでも間違った記述をしてしまうとエラーになってしまいます。定義の流れを知っておくということは重要ですね。

役に立った!」と思れましたら、下のSNSボタンで記事のシェアをしていただけると嬉しいです!

JavaScript コードレシピ集
技術評論社
JavaScriptによるWeb開発のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。基本文法/文字や数値の取り扱い/データの取り扱い/ブラウザーの操作/ユーザーアクション/HTML要素の操作/アニメーション/画像、音声、動画/スマートフォンのセンサーなど、目的別にレシピを整理

コメント

タイトルとURLをコピーしました