JavaScript
🔇 addEventListenerが発火しない
DOMの読み込み前にイベントを登録している
😰 こんな症状
イベントリスナーを設定したのにクリックしても何も起きない。DOM要素の取得タイミングで起きやすいよ。
🔍 原因
scriptタグがhead内にあり、DOM要素が存在する前にaddEventListenerを実行しているよ。ブラウザはHTMLを上から順に読むから、scriptがheadにあると、bodyの要素がまだ作られていない状態でJSが実行されるんだ。存在しない要素にイベントは登録できないよ。
❌ エラーが起きるコード
// scriptタグがhead内にあり、DOM要素が存在する前にaddEventListenerを実行し✅ 直し方
1. scriptタグを</body>の直前に移動する。 2. またはscriptタグにdefer属性を付ける。 3. DOMContentLoadedイベント内でリスナーを登録する。 4. console.log(element)でnullが返っていないか確認する。
✅ 修正後のコード
// scriptタグを</body>の直前に移動するか、DOMContentLoadedイベント内でリスこの解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- ボタンを押しても何も起きない — getElementById の id 不一致
- 計算結果が NaN になる — 文字列を数値に変換していない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説