为什么使用DOM实现的计数器点击按钮后数值不更新？

你的代码核心问题是：仅在页面初始化时给DOM元素counterText赋值了一次counterNumber，后续点击按钮修改counterNumber变量后，没有同步更新DOM的内容。

修改后的代码 #

var counterNumber = 0;
var counterText = document.querySelector("strong");
var reduceButton = document.querySelectorAll("button")[0];
var increaseButton = document.querySelectorAll("button")[1];

// 封装更新计数器显示的函数
function updateCounterDisplay() {
  counterText.textContent = counterNumber;
}

// 初始化显示初始值
updateCounterDisplay();

increaseButton.addEventListener("click", function() {
  counterNumber++;
  updateCounterDisplay(); // 点击后同步更新页面显示
})

reduceButton.addEventListener("click", function() {
  counterNumber--;
  updateCounterDisplay(); // 点击后同步更新页面显示
})

关键修改点 #

• 新增updateCounterDisplay函数，统一处理DOM更新逻辑，避免重复代码
• 页面加载时先执行一次updateCounterDisplay，确保初始数值正确显示
• 每次点击按钮修改counterNumber后，立即调用updateCounterDisplay，让页面上的数值和变量同步

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