1. ホーム
  2. javascript

[解決済み] null のプロパティ 'addEventListener' を読み取ることができません。

2022-01-28 12:05:53

質問

あるプロジェクトでバニラJavaScriptを使用しなければなりません。 いくつかの関数がありますが、そのうちの1つはメニューを開くボタンです。 ターゲットidが存在するページでは動作しますが、idが存在しないページではエラーになります。 関数がidを見つけられないページでは、"Cannot read property 'addEventListener' of null "というエラーが発生し、他のどの関数も動作しません。

以下は、メニューを開くボタンのコードです。

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

これをどう処理すればいいのでしょうか?おそらく、このコードを別の関数でラップするか、if/elseステートメントを使用して、特定のページでidを検索する必要があると思いますが、正確にはわかりません。

解決方法は?

最も簡単な方法は、単に el がヌルでないことを確認してから、イベントリスナーを追加してください。

var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}