2026年4月27日
ボタンを押しても何も起きない…その原因を解決しよう
JavaScriptでボタンを作ったのに、クリックしても何も起きない。初心者が最もハマりやすい問題の1つです。
「コードは合っているはずなのに…」と悩んでいるなら、この記事を読んでください。ボタンが動かない原因は、ほぼ決まったパターンに当てはまります。
この記事では、よくある原因6つを具体的なコード例付きで解説します。「ダメなコード」と「動くコード」の両方を示すので、自分のコードと見比べて原因を特定してください。
まず開発者ツールでエラーを確認しよう
原因を探す前に、まずブラウザの開発者ツールを開いてエラーが出ていないか確認しましょう。
- Windows: F12 キー
- Mac: Cmd + Option + I
Consoleパネルに赤いメッセージが出ていれば、それがヒントです。エラーメッセージの読み方がわからない場合は「プログラミングのエラーメッセージの読み方」を参考にしてください。
エラーが出ていない場合でも、以下の原因に当てはまることがあります。1つずつ確認していきましょう。
🔗 開発者ツールの詳しい使い方は「ブラウザの開発者ツールの使い方」で解説しています。
ボタンが動かない原因6つと直し方
原因① scriptタグの位置が間違っている
最もよくある原因です。scriptタグが <head> の中や、ボタンのHTMLより前に書かれていると、JavaScriptが実行される時点ではまだボタンが存在しないため、取得できません。
❌ 動かないコード:
<head>
<script>
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
alert('クリック！');
});
</script>
</head>
<body>
<button id="myBtn">押してね</button>
</body>→ scriptが実行される時点で #myBtn はまだ存在しない → btn は null → エラー
✅ 動くコード（修正方法1: scriptを</body>の直前に移動）:
<body>
<button id="myBtn">押してね</button>
<script>
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
alert('クリック！');
});
</script>
</body>✅ 動くコード（修正方法2: DOMContentLoadedを使う）:
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
alert('クリック！');
});
});
</script>
</head>原因② セレクタ（id・class名）が間違っている
HTMLのidやclass名と、JavaScriptのquerySelector()の引数が一致していないパターンです。
❌ 動かないコード:
<button id="my-btn">押してね</button>
<script>
const btn = document.querySelector('#myBtn'); // ハイフンなし
</script>→ HTMLは "my-btn"（ハイフンあり）なのに、JSでは "myBtn"（キャメルケース）を探している
✅ 動くコード:
const btn = document.querySelector('#my-btn'); // HTMLと完全一致確認ポイント:
- 大文字・小文字の違い（myBtn と mybtn は別物）
- ハイフンとキャメルケースの混同
- # を忘れている（idなら #、classなら . が必要）
原因③ イベント名のスペルミス
addEventListener の第1引数（イベント名）にスペルミスがあると、イベントが登録されず何も起きません。エラーも出ないので気づきにくいです。
❌ 動かないコード:
btn.addEventListener('clik', function() { // "click" のスペルミス
alert('クリック！');
});✅ 動くコード:
btn.addEventListener('click', function() {
alert('クリック！');
});よくあるスペルミス:
- clik → click
- onclick → click（addEventListenerでは "on" をつけない）
- Click → click（大文字はNG）
原因④ 関数を呼び出していない / 定義だけしている
関数を定義しただけで、イベントリスナーに登録していないパターンです。
❌ 動かないコード:
function handleClick() {
alert('クリック！');
}
// ← addEventListener を書き忘れている✅ 動くコード:
function handleClick() {
alert('クリック！');
}
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', handleClick);注意: addEventListener に渡すとき、関数名の後に () をつけない。
- ✅ btn.addEventListener('click', handleClick)
- ❌ btn.addEventListener('click', handleClick()) ← 即座に実行されてしまう
原因⑤ 要素が複数あるのに querySelector で1つしか取得していない
同じクラス名のボタンが複数あるのに querySelector（最初の1つだけ取得）を使っているパターンです。
❌ 動かないコード（2つ目以降のボタンが動かない）:
const btn = document.querySelector('.btn'); // 最初の1つだけ
btn.addEventListener('click', function() {
alert('クリック！');
});✅ 動くコード（全ボタンにイベントを登録）:
const buttons = document.querySelectorAll('.btn');
buttons.forEach(function(btn) {
btn.addEventListener('click', function() {
alert('クリック！');
});
});原因⑥ HTMLの属性に onclick を書いているが関数名が間違っている
HTML属性でイベントを設定する方法を使っている場合のミスです。
❌ 動かないコード:
<button onclick="handleclick()">押してね</button>
<script>
function handleClick() { // 大文字の C
alert('クリック！');
}
</script>→ HTMLでは "handleclick"（小文字）、JSでは "handleClick"（大文字C）で名前が一致しない
✅ 動くコード:
<button onclick="handleClick()">押してね</button>
<script>
function handleClick() {
alert('クリック！');
}
</script>ボタンが動かないときのデバッグ手順
- 開発者ツールのConsoleにエラーが出ていないか確認する
- scriptタグの位置を確認する（</body>の直前にあるか？）
- セレクタ（id・class名）がHTMLと完全一致しているか確認する
- イベント名のスペルを確認する（"click" が正しいか？）
- addEventListenerが書かれているか確認する
- console.log('テスト') をイベント内に書いて、イベント自体が発火しているか確認する
ステップ6の console.log が表示されれば、イベントは正しく登録されています。表示されなければ、原因①〜⑤のどれかに当てはまります。
まとめ
- ✅ 最も多い原因は「scriptタグの位置」— </body>の直前に書くのが安全
- ✅ セレクタ（id・class名）はHTMLと完全一致させる（大文字小文字に注意）
- ✅ addEventListener のイベント名は "click"（"on" はつけない、大文字NG）
- ✅ 関数を定義しただけでは動かない — addEventListener で登録が必要
- ✅ 複数のボタンには querySelectorAll + forEach を使う
- ✅ 困ったら console.log でイベントが発火しているか確認する
あわせて読みたい記事
- JavaScriptのイベント処理入門【onclick解説】 — イベント処理の基礎を学ぶ
- JavaScriptでHTMLを操作する方法【DOM入門】 — DOM操作の基本
- JavaScriptでボタンクリックを動かす方法【初心者向け】 — 最初のスクリプトの書き方
- プログラミングのエラーメッセージの読み方 — エラーメッセージの読み方
- ブラウザの開発者ツールの使い方 — デバッグに必須のツール