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)}

这是一个演示问题的小提琴

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);

这将更新费用和计数字段。

功能正常工作？

1 个答案: