JS赋值按钮innerText给变量后修改变量不生效的解决方法

核心原因是JavaScript中的字符串属于原始值类型，当你执行let text = toDone.innerText时，只是把按钮当前的innerText文本内容复制了一份存到text变量里，这个变量和DOM元素的innerText属性没有任何绑定关联。后续你给text重新赋值，只是修改了这个独立变量里存储的字符串，完全不会影响到DOM元素本身的属性，按钮文本自然不会更新。

原生JS里没法做到「给普通原始值变量赋值，自动同步修改DOM属性」，但可以通过两种方式实现符合开发习惯的类效果：

• 方式1：存储DOM对象的引用（最常用的简单写法）
  DOM元素属于对象类型，赋值时传递的是内存引用，你可以提前把按钮元素存为变量，后续直接通过这个变量修改属性就会直接同步到页面，不需要每次点击都重新查询DOM：

  <button id='todo-button' onclick='changeToDone()'>To Do</button>
  <script>
    // 提前缓存按钮元素引用
    const todoBtn = document.getElementById('todo-button');
    function changeToDone() {
      // 直接修改引用对象的属性，页面会同步更新
      todoBtn.innerText = 'Done';
    }
  </script>
  

• 方式2：独立维护状态变量，手动同步DOM
  如果你确实想把文本值单独抽成独立变量管理，只需要在修改变量后，手动把新值赋值给DOM属性即可，这也是原生JS开发里最基础的状态-视图同步逻辑：

  function changeToDone() {
    const todoBtn = document.getElementById('todo-button');
    // 独立存储文本状态
    let btnText = todoBtn.innerText;
    // 修改状态变量
    btnText = 'Done';
    // 手动把状态同步到视图
    todoBtn.innerText = btnText;
  }
  

注：Vue、React等前端框架实现的「修改变量自动更新页面」效果，本质是框架底层自动帮你完成了变量到DOM的同步操作，原生JavaScript默认不提供这种自动绑定能力。

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