HTMLの読み込みが終わってなくてJavaScriptでnullエラーが出てしまうことがちょくちょくある。
かといってHTMLの末尾にJavaScriptを書くと可読性がよろしくない。
その対処法。
nullエラーが出る状況
下記のようにhead内でh2の値を取得しようとすると、まだ読み込まれてなくてエラー出る。
Uncaught TypeError: document.getElementById(...) is null
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトタイトル</title>
<script>
const h2Value = document.getElementById('h2Title').value;
</script>
</head>
<body>
<section>
<h2 id="h2Title">タイトル</h2>
<p>コンテンツの内容</p>
</section>
</body>
</html>
onloadで対策
簡単なのはこれ。
参考
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトタイトル</title>
<script>
function firstscript(){
const h2Value = document.getElementById('h2Title').value;
}
</script>
</head>
<body onload="firstscript();">
<section>
<h2 id="h2Title">タイトル</h2>
<p>コンテンツの内容</p>
</section>
</body>
</html>
onloadは重複不可だし既に使われていることが多い
onloadは複数書くと、上書きされて最後に書いたonloadだけが動作してしまう。
addEventListener('load', )なら複数でも問題ないけど未だに古いバージョンのIEに縛られている現場が結構あってaddEventListener()未対応なことがある。
社内システムを互換表示設定にした上でIEで使うところ結構あるのよね。
参考
【JavaScript】onloadイベントは複数回使用できない！対処法を解説 | ウェブカツBLOG
古いバージョンのIEでaddEventListner使えない時
onloadが使われていなければラッキー。
使われているなら、既存のonloadイベントに追記するか、HTMLの末尾に書くしかないのかなあ。
