【JavaScript】Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

記事概要

JavaScriptによって発生したエラーUncaught TypeError: Cannot read properties of null (reading 'addEventListener')を解消する方法について、まとめる

事象

下記エラーがコンソール上で発生する

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

エラー原因

JavaScriptで定義した要素が存在しないため、要素がnullになってしまう
nullに対してaddEventListenerを使用したことでエラーが発生

JavaScriptを使用しないページで発生する

対応方法

要素がnullの場合、それ以降のコードを読まないようにどちらかを追記

• return false;

  const priceInput = document.getElementById("item-price");
    if (!priceInput){ return false;} // 追記
    priceInput.addEventListener("input", () => {
      // 中略
    });
  

• return null;

  const priceInput = document.getElementById("item-price");
    if (!priceInput) return null; // 追記
    priceInput.addEventListener("input", () => {
      // 中略
    });