WEBデザインスキルアップを目指し、JavaScriptのお勉強を始めています。
なんとなくわかってきました。
HTMLは構成
CSSは飾り付け
JavaScriptは動く！
JavaScriptは動かす！
動かせられる！
ってことなんですね。
これを習得出来たらゲームとかも作りたいですね。
で、そんな白石ですが、
JavaScript学習の初歩の初歩で躓いたのでとりあえず、学習の記録として残しておきます。
今回JavaScript学習で利用したyoutube動画
JavaScript初心者動画や学習サイトを色々みているところですが
今日はこの動画にお世話になりました。
早速つまずく
上記の動画34分ごろに、デベロッパーツールを使って「console.log(input.value)」でログだしてこーぜ！って部分があるんですけど、何故か以下のエラーが。
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
at index.js:4:6
ﾋﾝﾋﾝ!!!!!!
どういうことなの！
調べると、これはaddEventListenerでnull返されちゃってますよということのようです。
nullってそもそも存在してないんだけど？ってことですよね。
どうして？ちゃんと書いたのに……
動画の通り書いたのに……。
でもこれ、めっちゃ簡単な理由でnullになってたことが判明しました。
ただのタイプミス
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
at index.js:4:6
もうこのエラー文にタイプエラーって書いてあるんですけど
その通りだったんですね。
で、私みたいな初心者だと
「ふむ……addEventListener……この箇所がダメなんだ！」
「addEventListener……ちゃんと書いているのになぜ？！」
って勘違い＆問題を見つけられないって状態になっちゃうんですよね。
実際、エラーの原因となっている箇所は、また別の箇所を確認して探す必要があるわけで。
で、どこを確認したら良いのかというと、動画内で言えば
const form = document.getElementById('form');
const input = document.getElementById('input');getElementById(‘確認箇所ここ！’)
そう、IDだったんです。
動画内では、addEventListenerの中で「コンソールにこのIDのログ出してや💛」てなことを頼んでいるわけですが、このIDが見つからないからnullが返されちゃったわけなので、IDの確認をする必要性がでてきます。
で、恐らくformとinputのIDが間違っているとあたりを付けられましたから、まずjsファイルの方を動画内のコードと照らし合わせました。
jsファイルの方はやはり全く間違いはなかったので、次にHTMLファイルを確認しました。
すると……。
<form class="mb-4" id="fome" name="fome">fome（笑）
うそでしょ、なにふぉめ？ふぉめかこれ？は？
恥ずかしいよお～～～～～～～～＞＜＞＜＞＜
こんなので、こんなので躓いていました。
formに直したらちゃんと動くようになりました。
ほんと恥ずかしかったです。
まとめ
なんでこんな恥ずかしい間違いを公表するのかと言いますと、エラーになって検索しまくってもなかなか答えにたどり着けなかったからです。
初心者ならではのエラーってありますよね。
そういうのもできる限り残しておこうと思います。
いやああ、でも恥ずかしかった。。。
しかしこれでひとつ理解が進んだので、よしとします。うん。
😢
