JavaScript

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

取得しようとしたHTML要素が見つかっていない

😰 こんな症状

addEventListenerやtextContentを使った行で「Cannot read properties of null」と出る。getElementByIdなどが要素を見つけられずnullを返しているのが原因だよ。

🔍 原因

document.getElementById('xxx')で指定したidがHTMLに存在しないよ。ブラウザはidが見つからないとnullを返すんだ。そのnullに対して.addEventListener()や.textContentなどのプロパティを読もうとするとこのエラーが出るよ。原因はほぼ2つ：(1) idのタイポ（大文字小文字・ハイフンの違いも別物）、(2) <script>がHTML要素より前にあって、要素が作られる前にJSが実行されている。reading の部分が 'textContent' や 'value' や 'style' でも原因と直し方は同じだよ。

❌ エラーが起きるコード

<button id="send-btn">送信</button>
<script>
  // ❌ scriptが要素より前にある or idが違うと null になる
  const el = document.getElementById("sendBtn");
  el.addEventListener("click", () => alert("送信"));
  // Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
</script>

✅ 直し方

1. JavaScriptのid名とHTMLのid="..."が完全に一致しているか確認する。 2. <script>タグを</body>の直前に移動するか、defer属性を付ける。 3. console.log(document.getElementById("ID名"))でnullが出たら取得失敗と確定できる。 4. 要素が無い場合もあり得るページでは if (el) や el?.addEventListener で安全にアクセスする。

✅ 修正後のコード

<button id="send-btn">送信</button>
<script>
  // ✅ HTMLのidと同じ文字列を指定し、scriptは要素の後に置く
  const el = document.getElementById("send-btn");
  el.addEventListener("click", () => alert("送信"));
</script>

この解決法は役立ちましたか？