DOM中分数无法更新，控制台显示正常问题求助

嘿，我一眼就看出问题出在哪啦！你遇到的DOM分数不更新的情况，核心原因是你一开始把DOM元素的innerText值存进了变量里，但之后修改这个变量的时候，根本没同步到页面的DOM元素上。

问题根源 #

你这段代码：

let scoreboardDOMLocation = document.getElementById('score').innerText

这里的scoreboardDOMLocation只是复制了当时#score元素的文本内容（也就是初始的"$0"），它和DOM元素本身没有绑定关系。后面你修改这个变量时，只是改变了内存里的一个普通值，页面上的DOM元素完全不知道这件事——所以控制台打印变量能看到变化，但页面就是没动静。

修复方案 #

有两种简单的修复方式，选哪种都可以：

方案1：每次更新时直接操作DOM元素

把修改分数的逻辑改成直接更新#score的innerText，这样就能同步到页面了：

let userEarnings = 0; 
// 这里只保存DOM元素引用，不要存innerText的值
const scoreElement = document.getElementById('score');

const teethEarnings = () => { 
  userEarnings += earnings.teeth;
  // 直接把新值赋值给元素的innerText，记得加上$符号哦
  scoreElement.innerText = `$${userEarnings}`;
  console.log('You clicked on teeth'); 
  console.log(userEarnings); 
} 

document.getElementById('teethPic').addEventListener('click', teethEarnings);

方案2：用getter/setter绑定变量和DOM

如果想保留变量操作的方式，可以用getter和setter让变量和DOM同步：

let userEarnings = 0; 
const scoreElement = document.getElementById('score');

// 定义一个绑定DOM的变量
let scoreboardDOMLocation = {
  get value() {
    return userEarnings;
  },
  set value(newVal) {
    userEarnings = newVal;
    scoreElement.innerText = `$${newVal}`;
  }
};

const teethEarnings = () => { 
  scoreboardDOMLocation.value += earnings.teeth;
  console.log('You clicked on teeth'); 
  console.log(scoreboardDOMLocation.value); 
} 

document.getElementById('teethPic').addEventListener('click', teethEarnings);

这样修改之后，每次点击牙齿图片，页面上的分数就会跟着更新啦！

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