19
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptでのUncaught TypeError: Cannot read property 'addEventListener' of null エラー

Posted at

Javascriptの中で指定ページ以外のページのconsoleを見ると


Uncaught TypeError: Cannot read property 'addEventListener' of null

というエラーが突然出た件。

あれ?指定ページでは出ないのに、、なぜ?となったので備忘録として。

今回のコード


window.addEventListener("load",function(){
const priceGet = document.getElementById("item-price");
priceGet.addEventListener("input", () => {

以下略

原因は他のページではidがitem-priceの要素が存在しないため
priceGetがnullになってしまう。
nullに対してaddEventListenerを使用したことでエラーが発生した。

対応策として


window.addEventListener("load",function(){
const priceGet = document.getElementById("item-price");
if (!priceGet){ return false;}
priceGet.addEventListener("input", () => {

以下略

if (!priceGet){ return false;}

を記載することで
priceGetがnullの場合にそれ以降のコードを読まないように実装できる。

もし何か間違い等あれば教えていただきたいです!

19
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?