あなたは最初のボタンを書きました。美しいですね。border-radiusがあります。ホバー効果があります。影も追加しました。 完璧.
押しています…何もありません。もう一度。 何もありません。
コンソールを開きます。そこには静寂があります。エラーも警告もありません。JavaScriptはあなたの元恋人と同じように沈黙しています。
デバッグの世界へようこそ。ボタンが動かなくなる最も一般的な理由を見てみましょう。
バグ1。
スクリプトが DOM よりも早く読み込まれました
痛みのレベル：🔥🔥🔥🔥🔥
これは古典です。あなたは警告されましたが、あなたは聞きませんでした。
// script.js — <head>const btn = document.querySelector('.my-button');に接続されています
btn.addEventListener('click', () => {
alert('It works!');
});このコードが実行されているとき、ボタンはまだ 物理的に存在しない DOM. querySelector は null を返します。そして null.addEventListener は TypeError、コンソールを見ていなかったので、気づかなかっただけです。
✅ 修理方法：
<!-- Вариант 1: defer --><script src="script.js" defer></script>
<!-- Вариант 2: скрипт перед </body> -->まだ生まれていない人を抱きしめることはできません。DOMの準備ができている必要があります。
バグ 2。
セレクターの誤字
痛みのレベル：🔥🔥（しかし恥は🔥🔥🔥🔥🔥）
// HTML: <button class="my-button">const btn = document.querySelector('.my-buton'); // 1つの 't' 💀querySelector 要素が見つからない場合、エラーはスローされません。それはただ静かに null を返します。そして、あなたは座って、JavaScriptが壊れたと思います。
✅ 検索方法：
const btn = document.querySelector('.my-buton');
console.log(btn); // null — あぁ、いたいた、この野郎何かがうまくいかない場合は、console.logすべて。これは「ダーティハック」ではなく、ツールです。シニアでさえもそうします。特にシニアは。
バグ 3。
addEventListener エラー
痛みのレベル：🔥🔥🔥
// ハンドラーをハングさせたと思いますか？
btn.addeventlistener('click', handleClick);
// JS：「addeventlistenerとは何ですか？知りません」at"
// 正しい：
btn.addEventListener('click', handleClick);JavaScriptは大文字と小文字を区別する言語です。addEventListener — その通り、大文字で E と L大文字と小文字が1つ違っていれば、無視されてしまいます。
また、関数を定義したものの、ハンドラをハングアップするのを忘れたこともあります。関数はありますが、addEventListenerはどこにもありません。コードは無音です。
バグ 4。
要素のオーバーラップ（z-index）
痛みのレベル：🔥🔥🔥🔥
ボタンがあります。ハンドラーがあります。コードは正しいですが、クリックが機能しません。
理由： ボタンの上に透明なdivが置かれています。 これは、削除するのを忘れたモーダルのオーバーレイかもしれません。z-index: 9999を持つ絶対配置ブロックかもしれません。::afterの疑似要素が広がっている可能性があります。
✅ 見つけ方：
// このコードは、クリックが実際にどこに当たるかを示します
document.addEventListener('click', (e) => {
console.log('Clicked on:', e.target);
});DevTools →右クリック→「要素を調査」 ボタンが強調表示されていない場合、それが問題の原因です。
バグ 5。
onclickが上書きされます
痛みのレベル：🔥🔥🔥
// ❌onclickはプロパティです。新しい値=古い値が消えました
btn.onclick = () => console.log('First');
btn.onclick = () => console.log('Second');
// 2番目のものだけが機能します！
// ✅ addEventListenerは置き換えるのではなく追加します
btn.addEventListener('click', () => console.log('First'));
btn.addEventListener('click', () => console.log('Second'));
// 両方とも機能します✨onclick — 変数として：新しいものを割り当てた場合、古いものは失われます。addEventListenerは配列のようなもので、置き換えるのではなく追加します。
バグ 6。
リンクを送る代わりに関数を呼び出す
痛みのレベル：🔥🔥🔥🔥🔥（何が起こっているのかわからないため）
罠に落ちる すべて 初心者：
function sayHello() {
alert('Hi!');
}
// ❌ クリックではなく、すぐに機能が呼び出されます
btn.addEventListener('click', sayHello());
// ✅ リンクを送信します。JS が後で呼び出します
btn.addEventListener('click', sayHello);違いは括弧内にあります。sayHello() — 「今すぐみんなの前でママに電話して」。sayHello — 「クリックしたらママに電話する」
バグ7。
フォーム内のボタン (preventDefault)
痛みのレベル：🔥🔥🔥🔥
<form><button>Отправить</button></form><!-- Нажимаешь — страница перезагружается 💀 -->フォーム内の <button> には、デフォルトで type="submit" があります。フォームが送信され、ページが更新され、console.logが点滅して消えます。
✅ 修理方法：
<!-- Вариант 1: указать type --><button type="button">Не отправляй форму!</button>逆の状況：誰かがDOMの上にstopPropagation()を掛け、イベントが到達しないだけです。イベントの出現の世界へようこそ。これは別のクエストです。
バグ 8。
動的要素 — ハンドラーは作成前にハングアップされました
痛みのレベル：🔥🔥🔥🔥
// ハンドラーをハングアップする
document.querySelector('.dynamic-btn').addEventListener('click', handler);
// 次に、innerHTMLを使用してボタンを作成します
container.innerHTML = '<button class="dynamic-btn">Click</button>';
// 新しいボタンは別のオブジェクトです。ハンドラーはそれに関連付けられていません。✅ 解決策はイベントの委任です。
// 常に存在する親にハンドラをハングアップします
document.querySelector('.container').addEventListener('click', (e) => {
if (e.target.matches('.dynamic-btn')) {
handler();
}
});イベントの委任は、JavaScript で最も重要なパターンの 1 つです。それを覚え、愛し、共に生きてください。
📋「ボタンが機能しない」チェックリスト
Stack Overflowに「ヘルプが機能しない」と書く前に、リストを確認してください。
コンソールを開きましたか？ - そうでない場合は、開いてください。今すぐ。F12。
要素は存在しますか？ -
console.log(querySelector(...))は null ではありませんか？DOMの後のスクリプト？ — defer / DOMContentLoaded /
</body>の前のスクリプト。セレクターは正しいですか？ - クラス、ID、タイプミスを確認してください。
addEventListener は正しいですか？ — 大文字小文字、括弧、すべて正しいですか？
機能を引き継ぎますか？ —
handlervshandler().何かが重なっていませんか？ — DevTools → Inspect → 何が強調表示されていますか？
動的要素ですか？ - 任せること。
🚀 本当にレベルアップしたいですか？
バグを解決するのは楽しいです（まあ、ほとんどは）。しかし、なぜ何かが壊れるのかを本当に理解するためには、DOM、イベントループ、クロージャ、this...の基本を理解する必要があります。
試してみる コディック — 実際のタスクを通じてプログラミングを学べるアプリケーション。「読んで忘れる」のではなく、「コードを書いて→結果を確認する」アプリです。JavaScript、Python、HTML/CSS、その他の言語をインタラクティブなタスクで学べます。
そして、私たちの テレグラムチャンネル —タスクの分析、ミニレッスン、チートシート、開発に関するミーム。並んでいるとき、交通機関に乗っているとき、または「寝る前に5分間」など、都合の良い場所でプログラミングを繰り返してください。
最終的な知恵
「複雑なバグ」の90％は、タイプミス、間違ったロード順序、不注意です。残念ですが、これは良いニュースです。デバッグすればするほど、問題を早く見つけることができます。
半年後には、3秒でバグを見つけることができるようになります。
とりあえず、コンソールを開いてください。常にコンソールを開いてください。
🐛 Happy debugging