JavaScriptでクリックしても動かない？onclickとaddEventListenerの違いを初心者向けに徹底解説！
「クリックしたら動くはずなのに…」
JavaScriptでボタンを動かそうとしても、思った通りに動かないことってありますよね。
この記事では、初心者が特につまづきやすい「クリックイベントの書き方」をやさしく解説します。
これを読めば、「ボタンをクリックしても反応しない…」が解決します！
🟢 1. onclickがうまく動かない理由
HTMLに直接 onclick を書くと、たしかに動きますが、注意点があります。
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
✅ 小さいコードなら問題ないですが、
❌ 複数のスクリプトがあると上書きされたり、動かなくなったりすることがあります。
また、外部JSファイルに分けたときにエラーが出やすいのも難点です。
基本的には addEventListener を使う方が安全でおすすめです。
🟢 2. addEventListenerでの正しい書き方
HTMLとJavaScriptをきれいに分けて書く方法がこちら👇
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
💬 ポイント
・HTMLとJSを分けて書けるので管理が楽
・複数のイベントを登録できる
・チーム開発や保守でも主流の書き方
👉 現場では「onclick」よりも「addEventListener」が標準です。
🟢 3. ()をつけたら即実行される理由
よくある初心者ミスがこちら👇
btn.addEventListener("click", changeText()); // ❌ 即実行されてしまう
btn.addEventListener("click", changeText); // ✅ イベント時に実行される
changeText() と書くと「関数をその場で実行」してしまいます。changeText のように 関数そのものを渡す のが正解です。
🧠 ポイント：
「関数を呼ぶ」ではなく「関数を渡す」と覚える！
🟢 4. 実践：クリックでテキストを切り替える
次は、1回のクリックでテキストを切り替える応用版です👇
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
これでクリックするたびに「こんにちは！」「こんばんは！」が切り替わります✨
🟢 5. よくある質問
Q1. onclickでもいいのでは？
👉 小さいサイトならOKですが、JSを複数書くと上書きされることがあります。
安全に使うなら「addEventListener」をおすすめします。
Q2. scriptはどこに書けばいい？
👉 HTMLの一番下（</body> の直前）に書くのが基本です。
先にHTMLを読み込んでからスクリプトが動くようになります。
🟢 6. まとめ
- onclick は簡単だけど上書きされたり動かないことがある
- addEventListener は複数イベントを安全に登録できる
- () をつけると「即実行」されるので注意！
💬 最後に
「クリックしても動かない…」は誰もが通る道です。
仕組みを理解すれば、動きを自由に作れるようになります！
✅ この記事で学べること
- onclickとaddEventListenerの違い
- 即実行される原因と対策
- テキストを切り替える実践コード
これで「クリックしても動かない問題」は卒業です🎓✨
その他関連記事はこちら→Programming Notes
Comments