HTMLにjavascriptのinnerHTMLで定数埋め込む iframe内の要素に対して実行したためエラーが起こる

パッケージとか入れられない環境で勉強ついでにHTML、Javascript、cssでローカルサイトを作ってました。

ただただ不自由な作業ですがパッケージとかの関数でなくそもそものタグなどを知れるのはいい勉強になりました。

そんなことをしている中で初学者が引っかかりがちなミスをしたため記載しておきます。

ミスで生じたエラーは下記です。

Uncaught TypeError: Cannot set property ‘innerHTML’ of null

javascriptでinnerHTMLを実行した際に変数がnullという状態です。

innerHTMLはHTML要素の中身を取得したり変更したりできるプロパティです。

getElementByIdで要素を取得できていない
1. 実行順序の問題ではない
2. iframeでのjavascript実行によるエラー

getElementByIdで要素を取得できていない

全体は省略するのですがエラーをはいた箇所のコードは下記です。

temp.innerHTML = HTMLTxt;

temp、innerHTMLは変数でtempにはHTML、HTMLTxtにはテキストを前処理で入れていて、tempの箇所の値をHTMLTxtで書き換えます。

デバッグしてみたところ上記箇所でエラーが起きた原因は、下記の箇所でgetElementByIdで要素を取得できておらずtempがnullになってしまっていることでした。

var temp = document.getElementById("testId")

このtemp変数でinnerHTMLプロパティを利用してHTMLの中身を書き換えようとしたのですが、temp変数がnullでinnerHTMLプロパティが失敗しました。

次に下記のようなtestIdのidを持ったタグがあるのにも関わらずgetElementByIdの結果がnullになった原因を探します。

‹div id="testId"›‹/div›

実行順序の問題ではない

まず私はよくある実行順序の問題を疑いました。

下記は例です。

‹!DOCTYPE html›
…
‹script type="text/javascript" src="test.js"›‹/script›
…
‹div id="testId"›‹/div›

HTMLはソースコードを上から順に実行します。

test.jsが実行された時にidが読み込まれていない状態となり、getElementByIdはnullを返してしまいます。

上記のエラーの原因はよくあるこのミスかと思ったのです。

しかし、残念ながらそれは今回の原因ではありませんでした。

scriptタグをHTMLの最後に書いている上に、window.onloadまで使ってHTMLの読み込みが終わってからjsファイルを読むようになっていました。

iframeでのjavascript実行によるエラー

間抜けですが、iframeでtest.jsを呼び出していたことが問題でした。

test.jsでiframeの定数の定義もしていたため、iframeでもscriptタグを書いてjsを読み込むようにしていました。

その結果、iframeのHTMLに存在しないidを引数にしたgetElementByIdがiframe内でも実行されており、要素を取得できないためinnerHTMLでエラーを起こしていました。

頭が凝り固まっており少し時間をかけてしまいました。

原因がわかったためすぐ修正しました。

下記のようにしてgetElementByIdの結果がnullでない場合のみinnerHTMLを実行するようにし、innerHTMLでエラーが起こるのを回避していました。

function insertInnerHTML(HTMLId,HTMLTxt){
 var temp = document.getElementById(HTMLId);
 if(temp != null){temp.innerHTML = HTMLTxt;};
};

window.onload = function(){
 insertInnerHTML("testId","Hello World");
};