功能訂購是否正常工作？

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

這將更新費用和計數字段。