無害(？)なエラー (EOTD No.5)
こちらAmetaです！
Error Of The Day(EOTD)も二週目に突入しました。第5回目は、このエラーです！
本日のエラー
シチュエーション
このエラーはローカル環境のルートパス(index.html)を表示した際、コンソールに表示されました。
エラー場所をみてみるとpreview.jsの35行目。
preview.jsは投稿する前に添付した画像を確認できるプレビュー機能を実装したファイルです。
35行目を確認。。
//preview.js
document.getElementById('image').addEventListener('change', (e) => {
どうやら、この行でエラーが起きたようでした。
しかし、アプリケーションの動作には全く影響がない様子。どうしたものか。。。
考察
Uncaught TypeError: Cannnot read property addEventListener of null at ~
まず、エラー文の頭２単語。
"Uncaught" & "TypeError" とは何ぞや？調べてみました。
このページで2単語は以下のように説明されていました。
”Uncaught means that the error was not caught in the catch part of the try-catch block.”
"Uncaught"は通常処理(try)と例外処理(catch)の、例外処理でも捉えきれないエラー
“The TypeError object represents an error when a value is not of the expected type.”
"TypeError"は値が本来の形式で渡されていないエラー
というふうに意訳してみました。
結論としては、
Uncaught TypeError = 例外としても処理しきれていない、値の形式が間違ったエラー
以上の事を大枠として踏まえて、エラー文を改めて確認。
Uncaught TypeError: Cannnot read property addEventListener of null at ~
この場合の"値の形式が間違った"というのはnullの事を指しているっぽい。
だとすると、"例外としても処理しきれていない"というのはnullには形式が存在しないから？
addEventListener of null、つまりnullで使おうとしているプロパティaddEventListenerが動かない。この従属関係を"preview.js"の方で捜索。
//preview.js
document.getElementById('image').addEventListener('change', (e) => {
なるほど！
document.getElementByIdで指定している"image"のidがhtml内に存在していないということか！
試しに、"image"のidを要素に持たない他のページを開いてみると同じエラーが表示されました。
解決
解決策としては、
条件分岐を用いて、"image"のidを持たないファイルでは"preview.js"を読み込まないようにする。
ということで"preview.js"の１行目にifの条件式を追加！！
変更前
//preview.js
document.getElementById('image').addEventListener('change', (e) => {
変更後
//preview.js
if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
//省略
document.getElementById('image').addEventListener('change', (e) => {
//省略
}
変更後...エラーは無事立ち去られました！
SOTD(Summary Of The Day)
今回のエラーはアプリケーションの動作には問題がありませんでした。
ただコンソールを開いたときに毎度毎度エラー文が表示されて気になるものでした。
そのようなケースは初めてでしたが、最終的に無事解決できて一安心。
Discussion
流石です！
流石ですか？笑