因此，我正在制作一个小型的空闲游戏，而我的工作之一就是格式化所有数字，以便它们之间使用逗号（出于审美目的）。我成功地使货币Energy有了这些逗号，但是我很难添加其他变量。我在两个不同的场合使用了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：无法将属性'innerHTML'设置为null
在HarvestClick（main.js：27）
在main.js：79
第27行：
document.getElementById('energy').innerHTML = energy;所以...我想回答为什么我收到此控制台错误，以及我如何一次对多个变量应用逗号格式并实时更新它们（在游戏运行时）。
谢谢！
最佳答案
您没有ID为energy的元素，因此调用document.getElementById('energy')返回null-当您尝试访问（然后分配）innerHTML的属性null时，会导致例外。
确保在某处声明或创建了ID为energy的元素-如果不确定该元素是否始终存在，请确保检查document.getElementById的结果是否为空，例如
var energyEl = document.getElementById('energy');
if (energyEl) {
energyEl.innerHTML = ...
}