エラーが起きた状況
DOM操作を行うjsファイルをhtmlから読み込んだ時、addEventListenerの行に上記のエラー
エラーの意味
直訳で「nullのプロパティは読みこめない」と言う意味。
主に、タイプミスなどで間違ったidによってDOM操作を行った場合に起こるエラー。
しかし、以下に示すように要素の指定自体には問題はなかった。
event.html
//前後省略
<body>
<button id="output-btn">文字列の出力</button>
<script src="js/event.js"></script>
<button id="add-btn">リストの追加</button>
<ul id="parent-list"></ul>
</body>
event.js
//前後略
const addBtn = document.getElementById('add-btn');
addBtn.addEventListener('click', () => )
原因＆解決法
結論から言うと、htmlでscriptタグによりjsファイルを読み込む位置に問題があった。
JavaScriptを直接記入ではなく読み込む場合、scriptタグより下のHTML要素にJavaScriptは干渉できなくなってしまう。
そのため、scriptタグをbodyの一番下に記入するか、scriptタグにdefer属性を記述することで、この問題を解決できる。
以下改善後コード例
event.html
//前後省略
<body>
<button id="output-btn">文字列の出力</button>
- <script src="js/event.js"></script>
<button id="add-btn">リストの追加</button>
<ul id="parent-list"></ul>
+ <script src="js/event.js"></script>
</body>
event.html
//前後省略
<body>
<button id="output-btn">文字列の出力</button>
- <script src="js/event.js"></script>
+ <script type="text/javascript" src="event.js"></script>
<button id="add-btn">リストの追加</button>
<ul id="parent-list"></ul>
</body>
おわりに
かなり簡単な内容でしたが、プログラミングのアウトプットの一環としてエラー対処を記録してみました。
誰かのお役に立てれば幸いです。