こんにちは。
今回はJavascriptで発生するエラーの対処法をシェアしたいと思います。
エラー内容
エラーは下記になります。
日本語に意訳すると、「未取得エラー：空（から）の属性タイプ”innerHTML”を設定することが出来ない」という意味になります。
具体的に例を出して、エラーの内容を説明します。
下記は、<p>のタグに”パラグラフ”と表示されるコードです。このコードの時に発生します。
<script>
document.getElementById("para1").innerHTML = "パラグラフ";
</script>
Javascriptテスト
<p id="para1">paragraph</p>エラーの内容は、id=para１が存在していない⇒nullなので、””パラグラフ”という文字列を設定出来ないということです。
存在しないidに対して出力するとこのエラーが発生します。
しかし、上記のコードはidを設定しているので一目では何も問題ないように見えます。
エラーが発生しない場合
次にエラーが発生しない場合のコードはこちらになります。
Javascriptテスト
<p id="para1">paragraph</p>
<script>
document.getElementById("para1").innerHTML = "パラグラフ12";
</script>この場合、よく見ると、<script>のタグが下の方に書かれています。
エラーが起こる原因
先述した通り、存在しないidに対して出力する場合に発生します。
エラーが発生したコードを見ると、５行目で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ボタンで記事のシェアをしていただけると嬉しいです！
コメント