JavaScript if语句内修改DOM文本不生效问题排查

代码不生效的核心问题是变量存储逻辑搞错了：
你执行let message = document.querySelector('.message').textContent时，只是把.message元素当前的文本内容（一个字符串原始值）复制了一份存到message变量里，这个变量和页面上的真实DOM元素没有任何绑定关系。后续你给message重新赋值，仅仅是修改了JS栈内存里的这个字符串副本，根本不会同步更新到页面上。

你代码里修改分数的逻辑其实写对了：每次都是直接选中.score元素，给它的textContent属性赋值，这才是真正操作DOM更新页面的写法，修改提示文本的时候你漏掉了这一步。

另外代码还有两个隐藏bug：

• score变量定义在点击事件回调内部，每次点击按钮都会把分数重置为20，扣分逻辑永远不会累计生效
• secretNumber没有在当前作用域定义，运行时会抛出未定义错误

// 跨点击需要保留状态的变量、常用DOM元素提前在事件外定义，避免重复查询、重复重置
let score = 20;
const secretNumber = Math.floor(Math.random() * 20) + 1;
const messageEl = document.querySelector('.message');
const scoreEl = document.querySelector('.score');
const guessInput = document.querySelector('.guess');

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(guessInput.value);
  if (!guess) {
    messageEl.textContent = '‼ Type a Number';
  } else if (secretNumber === guess) {
    messageEl.textContent = 'You Won 🥳';
  } else if (secretNumber < guess) {
    messageEl.textContent = 'It is a lower Number!';
    score--;
    scoreEl.textContent = score;
  } else if (secretNumber > guess) {
    messageEl.textContent = 'It is a higher Number!';
    score--;
    scoreEl.textContent = score;
  }
});

• 字符串、数字这类原始类型的赋值是值拷贝，变量存的是值本身，不是对数据源的引用，修改变量不会反向影响原始数据源
• 要更新页面上的文本内容，必须拿到对应的DOM元素对象，给它的textContent/innerText属性赋值才会触发页面重绘
• 事件回调里不要定义需要跨次触发保留状态的变量，否则每次触发回调都会把变量重置为初始值

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