JavaScript前端计算器项目修改赋值逻辑后屏幕数值不更新问题求解

核心原因 #

这是JS基础值类型的赋值特性导致的，和你预期的变量绑定逻辑完全不同：

• 字符串属于JS的基础值类型，基础类型的赋值是拷贝值，不是引用共享
• 你初始化时写的 let number = screen.value 只是把screen.value当前的字符串值复制了一份给到number变量，赋值完成后number和screen.value是两个完全独立的变量，修改任意一个都不会影响另一个

具体逻辑说明 #

你替换代码后的执行逻辑是：

1. 点击数字键时更新了内存中number变量的值
2. 仅在控制台打印了内存里的number值，没有任何修改DOM元素属性的操作
3. 页面渲染完全依赖DOM元素的属性值，你没有更新screen.value，页面自然不会有变化

原本的代码能正常工作，就是因为多了手动把最新值同步给DOM属性screen.value的步骤，触发了页面的重新渲染。

额外补充 #

如果不想每次手动给screen.value赋值，原生JS可以通过定义访问器实现简单的自动同步：

const keys = document.querySelectorAll(".number");
const screen = document.querySelector("#screen");
let _number = screen.value;
// 定义number的访问器，修改时自动同步到DOM
Object.defineProperty(window, 'number', {
  get() { return _number },
  set(newVal) {
    _number = newVal
    screen.value = newVal
  }
})

keys.forEach((key) => {
  key.addEventListener("click", (event) => {
    number += key.textContent
    console.log(number);
  });
});

之后你只要修改number的值，就会自动同步到页面的计算器屏幕上。

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