JavaScriptが動かないときは、原因を4つに分けて上から順に確かめると、どこで止まっているかが分かります。
- 届いていない：JavaScriptファイルが読みこまれていない
- エラーで止まっている：途中で赤いエラーが出て、そこから先が動いていない
- 要素が見つからない：操作したいボタンや箱を探せていない
- 処理の中身がちがう：動いてはいるが、思ったとおりの結果になっていない
CSSとちがってJavaScriptは、まちがえるとConsoleにエラーで教えてくれます。まずはConsoleを開くところから始めます。
べんりワザ開発者ツールの使い方入門開発者ツールの開き方とConsoleの見かたはこちら4段階1：JavaScriptファイルは届いている？
script.jsのいちばん上に、次の1行を足して再読み込みします。
console.log('script.js が読みこまれた');Consoleにこの文字が出なければ、ファイルが読みこまれていません。
<script>のsrcのパス：HTMLから見た道順になっているか（js/script.jsかscript.jsか）- ファイル名の綴り：
script.jsとscripts.jsは別物です - Consoleに
404 (Not Found)：出ていればパスのまちがいで確定です <script>タグを書き忘れている：HTMLを開いて、本当に書いてあるか確認します
段階2：赤いエラーが出ていない？
Consoleに赤いエラーが出ていたら、それが原因です。JavaScriptは、エラーが1つ出るとその後ろの処理を実行しません。「途中から全部動かない」ときは、たいていこれです。
エラーはいちばん上の1つから直します。1つ目を直すと、それに引きずられていたほかのエラーも消えることがよくあります。エラー文の右端に出ているscript.js:12のような表示を押すと、問題の行に飛べます。
よく出るエラーと意味はこちらです。
| エラー | よくある原因 |
|---|---|
SyntaxError | 書き方のまちがい。{や(の閉じ忘れ、,や'の打ちまちがい |
ReferenceError: xxx is not defined | 名前の綴りちがい、または定義より前で使っている |
TypeError: Cannot read properties of null | 要素が見つかっていない（段階3へ） |
TypeError: xxx is not a function | メソッド名の綴りちがい（addEventListnerなど） |
段階3：操作したい要素は見つかっている？
querySelectorなどで探した要素を、console.logで表示してみます。
const btn = document.querySelector('.menu-button');
console.log(btn);nullと出たら、要素が見つかっていません。原因はほぼ次の2つです。
- scriptが早すぎる：
<head>で読みこんでいて、要素ができる前に動いている。<script src="script.js" defer>のようにdeferを付けます - セレクタのまちがい：
.と#の取りちがえ、クラス名の綴りちがい
段階4：処理の中身は合っている？
エラーもなく、要素も見つかっている。それでも思ったとおりにならないときは、処理が動いているかと値が合っているかを順に確かめます。
クリックしたときに動いている？
btn.addEventListener('click', () => {
console.log('クリックされた');
// …ここに本来の処理…
});ボタンを押してもConsoleに何も出なければ、イベントが登録できていません。
- イベント名のまちがい：
'click'を'onclick'や'Click'と書いていないか - ちがう要素に登録している：同じクラスの要素が複数あり、
querySelectorが最初の1つだけを選んでいる。全部に付けるならquerySelectorAllとforEachを使います - 関数を呼んでしまっている：
addEventListener('click', toggle())と()を付けると、登録した瞬間に1回動くだけになります。toggleと書きます
値は思ったとおり？
const count = document.querySelector('#count').value;
console.log(count, typeof count);console.logで途中の値を表示して、どこで思ったのと違う値になるかを探します。typeofを付けると種類も分かります。
- 数字のつもりが文字列：
inputのvalueは常に文字列です。'1' + 1は'11'になります。Number(count)で数にします =と===のまちがい：if (a = 1)は比べるのではなく代入してしまい、いつも真になります- クラス名の書き方：
classList.add('.active')のように.を付けると、.activeという名前のクラスが付きます。classListでは.を付けません
それでも変わらないなら：保存とキャッシュ
- 保存したか：タブに「●」が付いていたら未保存です
- 見ているファイルは合っているか：似た名前のファイルを編集していないか
- キャッシュ：
⌘ + ⇧ + R/Ctrl + Shift + Rで、キャッシュを無視して再読み込みします
まとめ
- 原因は4つ：届いていない・エラーで止まっている・要素が見つからない・処理の中身がちがう
- ファイルの先頭に
console.logを書いて、読みこまれているかを最初に確かめる - 赤いエラーはいちばん上の1つから直す。1つのエラーで後ろの処理は全部止まる
- 要素が
nullなら、deferとセレクタを確認 - 処理の途中に
console.logを置いて、どこで値がずれるかを半分ずつせばめる