所以我正在制作一个小型闲置游戏，我的部分努力是格式化所有数字，以便它们之间有逗号(出于美观目的)。我成功地让我的货币 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
未捕获的类型错误:无法将属性“innerHTML”设置为 null 在harvesClick (main.js:27) 在 main.js:79
第 27 行:document.getElementById('energy').innerHTML = energy;
所以...我想知道为什么我收到此控制台错误，以及如何一次将逗号格式应用于许多变量并实时更新它们(在游戏运行时)。 谢谢!
最佳答案
您没有 ID 为 energy 的元素，因此您的调用 document.getElementById('energy') 返回 null - 当您尝试访问(然后分配)innerHTML 为 null 的属性时，会引发异常。
确保在某处声明或创建了一个 id 为 energy 的元素 - 如果您不确定它是否会一直存在，请确保检查 document.getElementById 是否为 null，例如
var energyEl = document.getElementById('energy');
if (energyEl) {
energyEl.innerHTML = ...
}
关于javascript - HTML/JS 脚本中的变量未定义错误，神秘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42743244/