「JavaScriptを書いたのに動かない…」
そんな経験はありませんか？
実は、JavaScriptが動かない原因のほとんどは、よくあるパターンに当てはまります。
この記事では、初心者の方でもすぐに確認できるチェックポイントと解決方法をわかりやすく解説します。
JavaScriptが動かない主な原因
ファイルが読み込まれていない
まず最初に確認すべきポイントです。
<script src="script.js"></script>
この記述がないと、JavaScriptは実行されません。
読み込み位置が間違っている
headに書くと、HTMLより先に読み込まれてしまい、動かないことがあります。
▼ 対処方法（コピペOK）
<script src="script.js" defer></script>
または、bodyの閉じタグ直前に書くのがおすすめです。
スペルミス・記述ミス
JavaScriptは小さなミスでも動かなくなります。
- document → docment
- addEventListener のスペルミス
HTMLのクラス名が違う
JavaScriptとHTMLでクラス名が一致していないと動きません。
<div class="menu"></div>
document.querySelector(".menu");
この2つが一致しているか確認しましょう。
CSSだけで完結しているケース
JavaScriptを書かなくても、CSSだけで実装できる場合もあります。
不要なJSを書いていないか確認しましょう。
キャッシュの影響
古いJavaScriptが読み込まれている可能性があります。
- Ctrl + F5で強制リロード
- キャッシュ削除
すぐできるチェックリスト
- scriptタグは書いてあるか
- deferが付いているか
- ファイルパスは正しいか
- スペルミスはないか
- クラス名は一致しているか
初心者におすすめの書き方
<script src="script.js" defer></script>
この書き方にしておけば、読み込み順の問題を防げます。
まとめ
JavaScriptが動かない原因は、ほとんどが基本的なミスです。
- 読み込みミス
- スペルミス
- クラス名の不一致
この3つをチェックすれば、多くの問題は解決できます。
ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
