JavaScript
🚨 Uncaught TypeError: Cannot read properties of null
getElementById の id が存在しない
😰 こんな症状
コンソールに TypeError: Cannot read properties of null と表示される。DOM要素の取得に失敗したときに起きやすいよ。
🔍 原因
document.getElementById('xxx')で指定したidがHTMLに存在しないよ。ブラウザはidが見つからないとnullを返すんだ。そのnullに対して.addEventListener()や.textContentなどのプロパティにアクセスしようとするとこのエラーが出るよ。idのタイポか、scriptがHTML読み込み前に実行されているのが原因だよ。
❌ エラーが起きるコード
const el = document.getElementById("btn");
el.addEventListener("click", fn);
// el が null✅ 直し方
1. JavaScriptのid名とHTMLのid="..."が完全に一致しているか確認する。 2. <script>タグが</body>の直前にあるか確認する（またはdefer属性を付ける）。 3. console.log(element)を追加してnullが出たら取得失敗。 4. オプショナルチェーン（element?.addEventListener）で安全にアクセスする。
✅ 修正後のコード
const el = document.getElementById("btn");
if (el) el.addEventListener("click", fn);この解決法は役立ちましたか？
🔗 関連するエラー
- TypeError: Cannot read properties of null（null参照） — nullのプロパティにアクセスしている
- TypeError: Cannot read properties of undefined (reading 'length') — undefinedに対して.lengthを呼んでいる
- TypeError: Cannot set properties of null (setting 'textContent') — nullに対してプロパティを設定しようとしている
- ボタンを押しても何も起きない — getElementById の id 不一致
- ReferenceError: Cannot access before initialization — let/constの宣言前にアクセスしている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説