ボタンをクリックしても何も起きない（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 タブでエラーが出ていないかも確認してください。