[解決済み] 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);
}
関連
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] 変数が「未定義」または「NULL」であるかどうかを判断するにはどうすればよいですか?
-
[解決済み] JavaScript でオブジェクトが特定のプロパティを持つかどうかを確認するにはどうすればよいですか?
-
[解決済み] Node.jsで環境変数を読み込む
-
[解決済み] addEventListenerとonclickの比較
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】オブジェクトの配列をプロパティ値でソートする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】SyntaxError: 期待された式が、'<'を得た。
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]
-
[解決済み】DOMContentLoadedイベントとloadイベントの違いについて
-
[解決済み】ブラウザ/タブがアクティブかどうかを判断する方法 [重複]。