Question

所以我正在制作一个小型闲置游戏，我的部分斗争是格式化所有数字，以便它们之间有逗号（为了审美目的）。我成功地使我的货币，能源，有这些逗号，但我很难添加其他变量。我在两个不同的场合使用了num.toLocaleString();和num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");方法。

我的js代码：

var energyDisp = '0';
var energy = 0;
var harvestClickAmt = 1;
var windmills = 0;
var windmillProduction = 1;
var windmillCost = 0;
var wcD = '0'; //Display for Windmill Cost
var solarPanels = 0;
 var solarProduction = 3;
var solarCost = 0;
var scD = '0'; // Display for Solar Cost
var dams = 0;
var damProduction = 20;
var damCost = 0;
var dcD = '0'; // Display for Dam Cost


function toCommas(num) {  
var c = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return c;

}

function harvestClick(harvestAmt) {
    energy += Math.round(harvestAmt);
    energyDisp = toCommas(energy);
    document.getElementById('energy').innerHTML = energy;
    document.getElementById('energyDisp').innerHTML = energyDisp;

}

function buyWindmill(){
windmillCost = Math.floor(40 * Math.pow(1.14,windmills));    
if(energy >= windmillCost){                                  
    windmills += 1;                                  
    energy -= windmillCost;                         
    document.getElementById('windmills').innerHTML = windmills;  
    document.getElementById('energy').innerHTML = energy;  
};
var nextCost = Math.floor(40 * Math.pow(1.14, windmills));  

};

function buySolarPanel(){
solarCost = Math.floor(600 * Math.pow(1.13,solarPanels));     
if(energy >= solarCost){                                  
    solarPanels += 1;                                  
    energy -= solarCost; 
    harvestClickAmt += 1;
    document.getElementById('solarPanels').innerHTML = solarPanels;  
    document.getElementById('energy').innerHTML = energy; 

};
var nextCost = Math.floor(600 * Math.pow(1.13, solarPanels));       
document.getElementById('solarCost').innerHTML = nextCost; 
toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('harvestClickAmt').innerHTML = harvestClickAmt; 
};

function buyDam(){
damCost = Math.floor(5000 * Math.pow(1.126,dams));     
if(energy >= damCost){                                  
    dams += 1;                                  
    energy -= damCost; 
    windmillProduction *= 1.001;
    document.getElementById('dams').innerHTML = dams;  
    document.getElementById('energy').innerHTML = energy; 

};
var nextCost = Math.floor(5000 * Math.pow(1.13, dams));       
document.getElementById('damCost').innerHTML = nextCost; 
document.getElementById('damProduction').innerHTML = windmillProduction; 
};



window.setInterval(function(){

harvestClick((windmillProduction * windmills) +
(solarProduction * solarPanels) +
(damProduction * dams));
toCommas();

document.getElementById('wcD').innerHTML = windmillCost; 
    document.getElementById('scD').innerHTML = solarCost; 
    document.getElementById('dcD').innerHTML = damCost; 
    );
}, 1000);

我的HTML：

    <html>
    <link rel="stylesheet" type="text/css" href="interface.css" />

     <head>
        <body>
        <button id = "harvest" onclick="harvestClick(5)"></button>
        <br />
        <span id="energyDisp">0</span> Energy
        <br />

        <button onclick="buyWindmill()">Buy Windmill</button>
        <br />
        Windmills: <span id="windmills">0</span>
        <br />
        Cost: <span id="wcD">40</span> Energy

        <br />
        <button onclick="buySolarPanel()">Buy Solar Panel</button>
        <br />
        Increases clicking production by 1 energy.
        <br />
        Solar Panels: <span id="solarPanels">0</span>
        <br />
        Cost: <span id="scD">600</span> Energy

        <br />
        <button onclick="buyDam()">Buy Dam</button>
        <br />
        Increases windmill production by 0.1% per dam.
        <br />
        Dams: <span id="dams">0</span>
        <br />
        Cost: <span id="dcD">5,000</span> Energy







        <script type="text/javascript" src="main.js"></script>

        </body>
    </head>
</html>

我的问题？好吧，游戏中的文字没有更新。我收到此错误： https://gyazo.com/c4b0df8453aa79f7db44655e7f7daf91

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null 在harvestClick（main.js：27）在main.js：79

第27行：document.getElementById('energy').innerHTML = energy;

所以...我想要回答我收到此控制台错误的原因，以及如何一次将逗号格式应用于多个变量并实时更新它们（当游戏正在运行时）。谢谢！

Answer 1

您没有ID为energy的元素，因此您的调用document.getElementById('energy')会返回null - 当您尝试访问（然后分配）属性时innerHTML的{{1}}，导致异常。

确保在某处声明或创建了ID为null的元素 - 如果您不确定它是否始终存在，请务必检查结果是否energy为空或无，例如

document.getElementById

HTML / JS脚本中的变量未定义错误，很神秘

1 个答案: