点击Add按钮后textContent未更新的JavaScript问题求助

核心问题是元素ID拼写不匹配：

你在JavaScript代码中尝试获取ID为num-el的元素：

let sumEl = document.getElementById("num-el")

但HTML中负责显示计算结果的元素ID是sum-el：

<span id="sum-el">Sum: </span>

因为ID不对应，sumEl的值是null，调用sumEl.textContent时自然无法修改页面内容。

修复后的JavaScript代码 #

let num1 = 8
let num2 = 2
document.getElementById("num1-el").textContent = num1
document.getElementById("num2-el").textContent = num2
// 修正ID为sum-el，与HTML中的元素匹配
let sumEl = document.getElementById("sum-el")

function add() {
  let result = num1 + num2
  sumEl.textContent = "Sum: " + result
}

新手提示 #

• 写代码时要注意HTML元素ID和JavaScript中调用的ID完全一致，拼写错误是入门阶段很常见的问题
• 遇到类似问题时，可以打开浏览器开发者工具（按F12）查看控制台，这类错误会在控制台显示Cannot set properties of null (setting 'textContent')，能帮你快速定位问题点

内容的提问来源于stack exchange，提问作者jsan10