ボタンをクリックしても何も起きない（addEventListener）

✅ 回答

イベントが動かない原因を順番に確認しましょう。

原因1：script タグが HTML 要素より前にある

JavaScriptが実行される時点で、まだボタンのHTMLが読み込まれていないと null になります。

<!-- ❌ script が先にあると要素が見つからない -->
<script>
  document.getElementById('btn').addEventListener('click', greet);
  // → エラー: Cannot read properties of null
</script>
<button id="btn">押す</button>

<!-- ✅ script を body の最後に置く -->
<button id="btn">押す</button>
<script>
  document.getElementById('btn').addEventListener('click', function() {
    alert('クリックされた！');
  });
</script>

原因2：id 名が間違っている

HTMLの id と JavaScript の getElementById の文字列が完全に一致しているか確認しましょう。大文字/小文字も区別されます。

原因3：関数を () 付きで渡してしまっている

// ❌ () をつけると「すぐ実行」されてしまう
btn.addEventListener('click', greet());

// ✅ 関数名だけ渡す（クリック時に実行される）
btn.addEventListener('click', greet);

まとめ：script は body の最後に置き、id 名を正確に合わせ、関数は () なしで渡しましょう。開発者ツールの Console タブでエラーが出ていないかも確認してください。

原因4：イベント伝播が stopPropagation で止められている

親要素で event.stopPropagation() が呼ばれていると、子要素のイベントが親に伝わりません。逆に、子要素で止めると親のリスナーが動きません。

// ❌ 親で伝播を止めると子のクリックが検知されない場合がある
parent.addEventListener('click', (e) => {
  e.stopPropagation(); // 伝播停止
});

// ✅ 必要な場合のみ stopPropagation を使う
child.addEventListener('click', (e) => {
  e.stopPropagation(); // 親に伝えたくないときだけ
  // 処理
});

原因5：バインド先の要素が動的に生成されている

JavaScriptで後から追加した要素には、事前に登録したイベントリスナーが効きません。イベント委譲（親要素にリスナーを登録）で対応します。

// ❌ 後から追加されたボタンには効かない
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handler);
});

// ✅ 親要素に委譲する
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    handler(e);
  }
});

中高生あるある：学園祭サイトのボタンが動かない

学園祭サイトで「投票ボタン」を作ったのにクリックしても何も起きない——原因の9割は「scriptタグの位置」です。HTMLの<button>より前にscriptを書いていませんか？ body の閉じタグ直前に移動するだけで解決します。

ハンバーガーメニューが反応しない場合も同じです。メニューボタンのHTMLが読み込まれる前にJSが実行されると、getElementById が null を返します。

onclick属性とaddEventListenerの違い

onclick属性：<button onclick="greet()"> のようにHTMLに直接書く方法。簡単だが、1つのイベントしか登録できない。

addEventListener：JSファイルから登録する方法。複数のイベントを登録でき、removeEventListenerで解除もできる。こちらが推奨。

注意：イベント名は全て小文字です。"Click" や "CLICK" ではなく "click" と書きましょう。

DevTools Event Listeners タブで確認する

1. F12でDevToolsを開く

2. Elementsタブで対象の要素を選択（クリックまたは左上の矢印アイコンで選択）

3. 右側パネルの「Event Listeners」タブをクリック

4. 「click」などのイベントが登録されているか確認

ここにイベントが表示されていなければ、addEventListenerが正しく実行されていません。Consoleタブでエラーが出ていないか確認しましょう。