くまだどうも、くまだです。
JavaScriptのaddEventListenerでイベント登録の実装をしているとき、よく見かける「null」のエラーの回避についてのメモ。
addEventListenerのnullエラー回避
addEventListenerのnullとは、↓みたいなエラーのことです。
例えば、index.htmlに下記のボタンがあるとします。
<a href="" id="button">ボタン</a>そしてJavaScriptには、ボタンをクリックしたらボタンにis-activeクラスが付与される、みたいなイベントを作成したとします。
document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('button');
btn.addEventListener('click', function () {
btn.classList.add('is-active')
});
});index.htmlでコンソール画面を見れば、下記のエラーは出ません。
caught TypeError: Cannot read properties of null (reading 'addEventListener')
at HTMLDocument.<anonymous> (~~しかし、例えば下層ページ（例：about.html）にボタンがない場合、上記のエラー文が表示されます。
これは、index.htmlにボタンの要素（JSでいうと変数btn）はあるものの、他のページにはボタン要素がないため、nullになってしまうからです。（nullなのに、addEventListenerを使用したため）
これを回避するためには、JavaScriptを下記のように修正します。
document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('button');
// 追記
if (!btn) {
return false;
}
btn.addEventListener('click', function () {
btn.classList.add('is-active')
});
});要素がないページでも上記のエラー文が出なくなります。
if (!btn) {
return false;
}ボタン要素がない（null）の場合はコードを読まない、みたいなイメージ。
ここまで読んでくださりありがとうございました。