javascript(jQuery)が動かない原因

JSを動かなくて、困った事がありますでしょうか。
数時間調査して、解決できなくて、絶望したことがありますでしょうか。
大丈夫できっと解決できます。自分の経験上遭遇した事象を紹介して、解決策をまとめました。

jQueryが動かない原因１：JSとHTMLの実行順

デバッグしてJSの操作対象がUndefinedになった場合、この原因の可能性が高いです。

JSの中では、HTMLの項目を操作することがほとんどです。でもHTMLのその項目を準備できる前にはJSの操作対象がないため、動かないです。

解決策として2つあります。

$(function(){...});

まずJqueryで、上記のコードに囲わまれているかチェックしましょう。ない場合、追加すれば解決できます。

これの意味は「HTMLを読み込まれた後に実行しよう」。それ以外でも下記のような書き方でもOKです。

jQuery(document).ready(function(){

});

$(document).ready(function{

});

jQuery(function(){
});

自分書いた時、一番簡単な書き方を思えたらいいです。

一般的にJSは<header>の中で呼ばれています。それを<footer>に移動すれば解決できます。

でもこれはあんまりおすすめできないです。

特にJSが得意ではなく、ネットで調べてそのまま利用した場合、中身がよく分からなくて、あっちこっちにもJSを呼び、HTML内でも直接書いたりもします。

その場合、調べるのは結構大変です。

あたりをつけるために、コメントアウトして試すしかないです。あたりをつけたら、その中も確認して解決しましょう。