コミュニティ

Java Script初心者が覚えた、エラー把握&解決方法のまとめ

console.log();

console.log("Hello");

等と構文内に入れ、cromのディベロッパーツールを使ってどこまで実装されているのか、どこで止まっているか切り分けると便利です。
Helloの部分は変数を代入して、値がきちんと取得されているかなど、確認します。

スマホでのconsole.logの確認方法

スマホではconsole logが見れないので

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
        window.onload = function() {
                initVConsole();
            }
            // Initialize vConsole
        function initVConsole() {
            window.vConsole = new window.VConsole({
                defaultPlugins: ['system', 'network', 'element', 'storage'],
                maxLogNumber: 1000,
                onReady: function() {
                    console.log('vConsole is ready.');
                },
                onClearLog: function() {
                    console.log('on clearLog');
                }
            });
        }
    </script>

をhtml構文のfooterへ追記して、console logを表示させるボタンを追加して上げます。
※テスト段階で有効的な方法です。
image.png

javascriptが読み込まれない

asyncを外した時に動いたら、読み込んでいるjQueryのバージョンが古いという事が考えれます。
asyncの場合はjQuery3.3.1で動きました。

Uncaught TypeError:Cannot set property 'onclick' of null

原因:基本的に文法エラーまたは記述箇所のミス
解決:文法エラーがないか確認。bodyコンテンツの最下部に記述。

プログラミングは基本的にコードは上から順に読み込むので、
head要素にコードを書き読み込むとbody要素とその子孫はまだ取得できないのでエラーになります。

head要素に書かず、body要素の最後にコードを書く

onclickの結果は「該当要素なし」としてnullになり、

Uncaught TypeError: Cannot set property 'onclick' of null at test.js:12と

コンソールに出力されます。しかし、body要素の最後であれば、全てのHTMLを読み込んだ後なので、
情報を取得してイベントを発生させることができます。

misa_m
ホームページ制作を行っております。また、知識と情報のシェアも行っており個人レッスンは好評いただいております。ご質問などある方は、お気軽にtwitterのDMからお送りください! web制作だけではなく、最近はLINE APIに興味を持ち、そこから様々なAPIへと興味が広がりつつあります! Twitter → https://twitter.com/HanamiWeb
https://hanami-web.tokyo.jp
protoout-studio
プロトアウトスタジオは日本初のプロトタイピング専門スクールです。プログラミングだけではなく、企画力と発信力を身に付けて”自分で課題を見つけて実装し、発信し続ける人”を育成しています。 圧倒的なアウトプット力を身に付けましょう。 学生募集中です。
https://protoout.studio
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
ユーザーは見つかりませんでした