JavaScript

addEventListenerが発火しない

DOMの読み込み前にイベントを登録している

こんな症状

イベントリスナーを設定したのにクリックしても何も起きない。DOM要素の取得タイミングで起きやすいよ。

まず試す

<body>
  <button id="start-btn">開始</button>
  <script>
    const btn = document.getElementById("start-btn");
    btn.addEventListener("click", () => alert("開始"));
  </script>
</body>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓script が head にある
→ <script> を body の閉じタグ直前へ移す、または defer 属性を付ける。
✓外部ファイルを head で読み込んでいる
→ <script defer src="app.js"> にする。
✓要素が取れているか不明
→ console.log(element) で null でないか確認する。null なら登録できていない。

なぜ起きる？

scriptタグがhead内にあり、DOM要素が存在する前にaddEventListenerを実行しているよ。ブラウザはHTMLを上から順に読むから、scriptがheadにあると、bodyの要素がまだ作られていない状態でJSが実行されるんだ。存在しない要素にイベントは登録できないよ。

✕ エラーが起きるコード

<head>
  <script>
    // headで実行される時点ではボタンがまだ存在しない
    const btn = document.getElementById('start-btn');
    btn?.addEventListener('click', () => alert('開始'));
    // btnがnullなので登録されず、押しても何も起きない
  </script>
</head>
<body>
  <button id='start-btn'>開始</button>
</body>

✓ 直したコード

<body>
  <button id='start-btn'>開始</button>
  <!-- ✅ 要素の後（bodyの最後）でJSを実行する -->
  <script>
    const btn = document.getElementById('start-btn');
    btn.addEventListener('click', () => alert('開始'));
  </script>
</body>
<!-- 外部ファイルなら <script defer src='app.js'> でもOK -->

✅ 直ったか確認

要素をクリックして登録した処理（alert等）が動けばOK。

🆘 まだ直らないときは

id のタイポでも要素が取れず発火しない。HTMLの id とJSの文字列が一致しているか確認しよう。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
計算結果が NaN になる — 文字列を数値に変換していない
TypeError: xxx is not a function — 関数でないものを呼び出している

📖 この問題を学べるレッスン

JSレッスン6：DOM操作で根本から理解する →

✏️ 手を動かして練習

このテーマの図解ドリルで実際に書いて確認する →

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説

📖 関連する用語

🚀 JSレッスン6：DOM操作で根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。

JSレッスン6：DOM操作へ →