こんにちは！今日は、コードを正しく書いたはずなのに動かない時の原因と、その解決方法についてまとめます。
「コードは合っているのに、なぜか背景色が反映されない…」そんな時にチェックすべきポイントを整理しました。
1. JavaScriptが動かない！そんな時は「F12」
プログラムが思った通りに動かない時、まず確認すべきなのが 「Console（コンソール）」 画面です。
-
開き方: 実行後、ブラウザで
F12キーを押し、「Console」タブを選択します。 -
役割: 開発者がエラーが出ていないか、値が正しく渡されているかを確認するための場所です。
エラーが出ていると赤字で親切に教えてくれるので、原因を探すための非常に重要な手がかりになります。
2. 外部ファイルが連結されていない？
HTMLとJavaScriptファイルを別々に作成した場合は、それらを「連結（リンク）」させる作業が必要です。
<script src="js/script.js"></script>
背景色が変わらなかったり、外部ファイルのコードが反応しない時は、まずこの src パスが合っているか確認することが大切だと学びました。
3. 【重要】コードは「上から下へ」読み込まれる
今日学んだ最も重要なポイントは、<script> タグを記述する 位置 です。
失敗した理由
HTML要素（例：<p id="output">）よりも 上 に <script> を書いてしまうと、JavaScriptが実行される瞬間にまだHTML要素が作られていないため、「そんなIDは見つからない！」というエラーが発生してしまいます。
解決策
JavaScriptのファイルやコードは、</body> タグの直前（一番下） に記述するのが基本です。
こうすることで、HTMLをすべて読み込んだ後にJavaScriptが動作するため、エラーを防ぐことができます。
💡
コードの位置を移動させたい時は、Ctrl + X (切り取り) を使って適切な場所に貼り付けると、作業がぐっと楽になります！
4. innerHTMLで文字を出力してみる
授業で練習した、HTML要素の中身を直接書き換える方法です。
<p id="output"></p>
<script>
// HTML要素（ID: output）を探して、内容を変更する
document.getElementById("output").innerHTML = "pタグに文字を出力しました！";
</script>
まとめ
-
コードが動かない時は、まず F12 でコンソールを確認する！
-
JavaScriptはHTML要素よりも 下 に書く（読み込み順が重要）。
-
外部ファイルのロードパスをしっかり確認する。