JavaScript动态变量求和无法实时更新，如何修复？

我尝试将两个会定期变化的变量相加，但作为两者之和的第三个变量，要么在初始未声明时无值，要么始终保持初始值的和。
制作了测试Demo，通过按钮修改prodScore变量，另有按钮用于将score更新为invisScore与prodScore的和，但每次得到的score都是初始值的和（5）。

错误原因 #

• 初始代码里var score = invisScore+=prodScore是一次性计算，仅在页面加载时执行一次，后续prodScore变化时不会重新计算。而且+=会错误修改invisScore本身的初始值，逻辑上应该是取两者的和，而非修改其中一个变量。
• updateScore函数只是把之前计算好的固定score值显示出来，没有重新计算当前两个变量的实时和。

修正方案 #

直接在updateScore函数里实时计算两个变量的和，不需要提前存储score（如果需要存储也可以在函数里重新赋值），同时补充初始页面加载时的变量显示：

修改后的完整代码：

<p>invisScore:<span id="invisScore"></span></p>
<p>prodScore:<span id="prodScore"></span></p>   
<p>invisScore + prodScore:<span id="score"></span></p>
<p><button onclick="addProdScore()">Add 1 Production Score</button></p>
<p><button onclick="minusProdScore()">Minus 1 Production Score</button></p>
<p><button onclick="updateScore()">Update Score</button></p>

<script>
let invisScore = 5
let prodScore = 0

// 页面加载时先显示初始值
document.getElementById('invisScore').textContent = invisScore;
document.getElementById('prodScore').textContent = prodScore;

addProdScore = function(){
    prodScore += 1
    document.getElementById('prodScore').textContent = prodScore;
}
minusProdScore = function(){
    prodScore -= 1
    document.getElementById('prodScore').textContent = prodScore;
}
updateScore = function(){
    // 每次调用时实时计算当前的和
    const currentScore = invisScore + prodScore;
    document.getElementById('score').textContent = currentScore;
    // 如果需要保留score变量，也可以这样写：
    // score = invisScore + prodScore;
    // document.getElementById('score').textContent = score;
}
</script>

如果想要自动更新总和（不用点击Update Score按钮），可以在修改prodScore的函数里直接调用updateScore：

addProdScore = function(){
    prodScore += 1
    document.getElementById('prodScore').textContent = prodScore;
    updateScore(); // 自动更新总和
}
minusProdScore = function(){
    prodScore -= 1
    document.getElementById('prodScore').textContent = prodScore;
    updateScore(); // 自动更新总和
}

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