JavaScript使用querySelector更新stPage文本仅生效一次、计数无法持续自增求助

变量作用域错配是点击后数值不累计的核心原因 #

原代码将articleNumber定义在stpage函数内部，属于函数局部作用域变量：每次触发点击调用stpage()时，JS引擎都会重新为articleNumber开辟一块全新的内存，初始值设为0，再执行一次自增得到1。这个变量根本不会保留上一次点击的运算结果，所以哪怕自增逻辑写对了，每次计算出来的结果永远是1，不存在累计效果。
你之前提到的“控制台打印数值符合预期”，大概率是控制台打印的不是函数内部的这个局部变量，才会出现打印值和页面渲染值不匹配的错觉。

冗余DOM操作会直接中断函数执行 #

原代码里手动执行numberNode.removeChild(numberNode.childNodes[0])的逻辑完全多余：

• 当你使用innerHTML给元素赋值时，JS本身就会自动清空目标元素下的所有原有子节点，不需要手动删除
• 如果#stPage元素内部没有对应索引的子节点（比如初始为空、子节点顺序变动），这行删除代码会直接抛出NotFoundError，导致整个函数的执行流中断，后面的innerHTML赋值逻辑根本不会运行，这也是你之前尝试的删除子节点方案完全不生效的核心原因。

把articleNumber移动到函数外部的调整已经解决了累计值存储的核心问题，但还存在可以改进的细节：

• 避免全局变量污染：现在把articleNumber定义在全局作用域，很容易被其他脚本意外修改，更稳妥的方式是通过闭包把累计变量封装起来，外部脚本无法直接修改这个值
• 减少重复DOM查询：每次调用函数都重新通过document.querySelector匹配#stPage节点，会触发全文档的DOM遍历，第一次查到节点后把节点引用存在内存里复用即可，不需要每次点击都重复查询
• 替换更安全的文本API：你渲染的内容是纯数字，没有HTML结构的解析需求，使用textContent代替innerHTML既可以避免不必要的HTML解析开销，也能杜绝潜在的XSS安全风险

可参考的优化后完整实现：

const stpage = (() => {
  // 累计变量封装在闭包内部，外部无法直接修改
  let articleNumber = 0;
  // 页面加载时就查询一次DOM节点，后续直接复用，避免重复遍历
  const numberNode = document.querySelector('#stPage');
  // 返回实际绑定到按钮点击事件的处理函数
  return () => {
    articleNumber++;
    // 纯文本赋值用textContent，比innerHTML更高效安全
    numberNode.textContent = articleNumber;
  }
})()

• 存储累计状态的变量，不能定义在会被反复触发的事件回调函数内部，局部变量的生命周期随函数执行结束就销毁，无法跨调用保留值
• 给DOM元素赋新内容时，不需要手动提前清空原有子节点，主流的内容赋值API本身就自带清空效果，额外的删除操作反而容易因为节点不存在触发报错，中断后续逻辑
• 排查逻辑问题时，控制台打印的变量一定要和实际渲染用的变量是同一个引用，否则很容易出现“打印值正确但页面不对”的排查偏差

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