JavaScript
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
nullに対してプロパティを設定しようとしている
こんな症状
textContentやinnerHTMLに代入した行でこのエラーが出る。getElementByIdが要素を見つけられずnullを返しているのが原因で、多くはid名の不一致かscriptタグの位置だよ。
まず試す
JSの id 文字列が HTML の id 属性と完全一致しているか確認し、script を body の閉じタグ直前に置く（または defer）。
js
<!-- HTMLのidとJSの文字列を完全に一致させる -->
<button id="send-btn">送信</button>
<script>
document.getElementById("send-btn").textContent = "送信中…";
</script>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓id名が少し違う（sendBtn と send-btn など）
→ 大文字小文字・ハイフンも別物。HTMLの id をコピペしてJSに貼る。 - ✓script が要素より前にある
→ script を body の閉じタグ直前へ。または <script defer src="..."> を付ける。 - ✓setting が innerHTML や value でも同じ
→ 原因と直し方は同じ。対象要素がちゃんと取れているかを確認する。
なぜ起きる？
document.getElementByIdなどでnullが返っているのに、そのままtextContentやinnerHTMLなどのプロパティに代入しようとしたよ。原因は2つに絞れることが多くて、(1) HTMLのid属性とJSに書いた文字列が一致していない（大文字小文字やハイフンの違いも別物扱い）、(2) scriptタグがHTML要素より前にあって、要素が作られる前にJSが実行されている、のどちらかだよ。setting の部分が 'innerHTML' や 'src' や 'value' になっていても原因と直し方は同じ。読み取りで失敗すると Cannot read properties of null という別のエラーになるよ。
✕ エラーが起きるコード
<button id="send-btn">送信</button>
<script>
// id が一致していない（sendBtn ≠ send-btn）
document.getElementById("sendBtn").textContent = "送信中…";
// Uncaught TypeError: Cannot set properties of null
</script>✓ 直したコード
<button id="send-btn">送信</button>
<script>
// HTMLのidと完全に同じ文字列を指定する
document.getElementById("send-btn").textContent = "送信中…";
</script>✅ 直ったか確認
console.log(document.getElementById('id名')) が null でなく要素を表示し、エラーが消えればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
- Uncaught TypeError: Cannot read properties of undefined (reading 'length') — undefinedに対して.lengthを読んでいる
- Uncaught ReferenceError: Cannot access 'x' before initialization — let/constの宣言前にアクセスしている
- Uncaught TypeError: Assignment to constant variable. — constで宣言した変数に再代入しようとした
- Uncaught TypeError: x.forEach is not a function — forEachできない値に対してforEachしている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説