如何添加两个变量以定期更新并获得最新的答案?

Question

我想把两个变量加在一起。这两个变量都有规律地变化。但是，无论它们如何变化，第三个变量(意味着这两个变量相加)要么没有值(如果这两个变量没有在开始时声明)，要么保持为初始值的和。

我做了一个小的演示来测试它，用按钮来适应"prodScore"变量，以及用于更新"分数"的按钮。值为invisScore和prodScore的和。

<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
addProdScore = function(){
prodScore += 1
document.getElementById('prodScore').textContent = prodScore;
}
minusProdScore = function(){
prodScore -= 1
document.getElementById('prodScore').textContent = prodScore;
}
updateScore = function(){
document.getElementById('score').textContent = score;
}
var score = invisScore+=prodScore
</script>

这只是每次给我5，作为0值prodScore和5值invisScore的总和。我需要做什么才能得到总和，"分数"价值是最新的吗?

Answer 1

score变量在页面加载时设置一次，然后永不更新。您可以在更新计算它的值时更新它，例如:

addProdScore = function(){
prodScore += 1;
score = invisScore+=prodScore;
document.getElementById('prodScore').textContent = prodScore;
}

或者使其计算成为一个函数，以便在重新显示值时重新调用:

updateScore = function(){
document.getElementById('score').textContent = score();
}
var score = function() {
return invisScore+=prodScore;
}

基本上，不管你怎么看，如果你想要分数如果要更新，则需要使用新值重新计算。

---

作为题外话，我不确定这是否完全符合您的意图:

score = invisScore+=prodScore;

这里是否也修改了invisScore?为了清晰起见，您可能希望将这些操作分离到各自的代码行中。现在，这一行很混乱，混乱的代码会导致bug。