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