javascript - 函数排序正常工作？

Question

我是 HTML/CSS/JS 的新手，没有正确理解或完全遗漏了一些东西。我正在尝试使用 Math.pow(2, NumCitizens) 这部分工作来更新“CitizenCost”的变量。我遇到问题的部分是将 CitizenCost 更新为正确的数字，并让 HTML 用正确的数字表示它。现在它正在更新，但它总是落后

IE:应该是 X = 2^1 然后 X = 2^2 依此类推

但是在 HTML 中它不会相应地更新它总是落后于一个方程所以如果实际成本是 X = 2^2。文本将显示 X = 2^1。除非玩家再次点击按钮。

function buycitizen(){
    CitizenCost = Math.pow(2, NumCitizens);
    document.getElementById("CitizenCost").innerHTML = "Cost of Citizen " + CitizenCost;
    if(land >= CitizenCost){
        land = land - CitizenCost;
        eps = eps + 2;
        NumCitizens++;
        document.getElementById("NumCitizens").innerHTML = NumCitizens;
    }
    else
        document.getElementById("SystemMessage").innerHTML = "You do not have enough Land Resources to provide for more Citizens right now!";
    setTimeout(systemclear, 5000)}

这是一个演示问题的 fiddle

https://jsfiddle.net/Traberjkt/yaq0rbad/

这是 Git

https://github.com/Traberjkt/Conquest

我尝试设置一个计时器，以便 CitizenCost 的文本每秒更新一次。我考虑过并尝试将成本方程放在一个单独的函数中，然后将它重新定位在函数的其他地方。可悲的是，我没有运气弄清楚这一点。非常感谢任何帮助或指出正确的方向!

Answer 1

也许你应该创建一个名为 moreCitizens(howMany) 的新函数:

function moreCitizens(howMany) {
  NumCitizens += howMany;
  document.getElementById("NumCitizens").innerHTML = NumCitizens;
  CitizenCost = Math.pow(2, NumCitizens);
  document.getElementById("CitizenCost").innerHTML = "Cost of Citizen " + CitizenCost;
}

然后代替

  NumCitizens++;

你可以写

  moreCitizens(1);

这将更新成本和计数字段。