您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

JavaScript innerHTML 報錯「Cannot set property of null」：getElementById 選擇器錯誤

編輯：程式設計疑難解答

錯誤代碼

<span class="day"></span>
<script>
var oday = document.getElementById("day"); // 錯誤：查找 id="day"，但元素只有 class="day"
oday.innerHTML = newday; // oday 為 null
</script>

錯誤原因

document.getElementById("day") 尋找 id="day" 的元素，但 HTML 中 <span class="day"> 只有 class 屬性，無 id 屬性。返回 null，隨後訪問 .innerHTML 拋出異常。

修正方案

方案一：添加 id 屬性（推薦）

<span id="day" class="day"></span>
<script>
var oday = document.getElementById("day"); // 正確
oday.innerHTML = newday;
</script>

方案二：使用 querySelector 選 class

<span class="day"></span>
<script>
var oday = document.querySelector(".day"); // 選第一個 class="day"
oday.innerHTML = newday;
</script>

方案三：使用 getElementsByClassName

var oday = document.getElementsByClassName("day")[0]; // 返回集合，取第一個
oday.innerHTML = newday;

最佳實踐建議

方法	適用場景	性能	返回值
getElementById	唯一標識元素	最快	Element / null
querySelector	複雜選擇器 (class, 屬性, 後代)	較慢	Element / null
getElementsByClassName	按 class 批量操作	快	HTMLCollection (即時)
querySelectorAll	複雜選擇器批量	較慢	NodeList (靜態)

調試技巧

控制台輸入 document.getElementById("day") 直接檢查返回值。
給元素加唯一 id，優先用 getElementById。
操作前判空：if (oday) oday.innerHTML = ...。

總結

id 與 class 混淆 是新手高頻錯誤。記住：#id 唯一，.class 可重複。HTML 寫 id="day"，JS 用 getElementById("day")；或 HTML 寫 class="day"，JS 用 querySelector(".day")。