[英]Javascript Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
I'm trying to make a Farm Clicker game myself with javascript. In other words, as you click the Add Gold button, the player will have more gold and will be able to buy new animals with the gold he has earned.我正在尝试用 javascript 自己制作一个 Farm Clicker 游戏。换句话说,当您单击“添加金币”按钮时,玩家将拥有更多的金币,并且能够用他赚取的金币购买新的动物。 But in my code I come across the following error: script.js:42 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at addGold (script.js:42:54) at HTMLButtonElement.但在我的代码中,我遇到了以下错误:script.js:42 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at addGold (script.js:42:54) at HTMLButtonElement。 (script.js:11:42) (脚本.js:11:42)
What is this error caused by?这个错误是由什么引起的? I leave the codes below.我把代码留在下面。
// global variables const myContent = document.getElementById("content"); var gold = 0; let animals = {}; var goldToAdd = 0; // global functions function addGoldButton() { let myButton = document.createElement("button"); myButton.addEventListener("click", () => addGold(1)); // add one myButton.innerHTML = "Add Gold;". myContent;appendChild(myButton). } function passiveGold() { if (animals.goats > 0) { goldToAdd += animals;goats * 5. //50=>5 10=>1 } if (animals.pigs > 0) { goldToAdd += animals;pigs * 10. //90=>10 9=>1 } if (animals.cows > 0) { goldToAdd += animals;cows * 15; //120=>15 8=>1 } addGold(goldToAdd); } addGoldButton(). function addGold(goldToAdd) { console;trace(); if (gold = null) { gold = goldToAdd. let goldCounter = document;createElement("h2"). goldCounter;id = "goldCounter". goldCounter:innerHTML = "Gold; " + gold. myContent;appendChild(goldCounter); } else { gold += goldToAdd. document.getElementById("goldCounter"):innerHTML = "Gold; " + gold; } // check for events on current gold level checkGold(). } function checkGold() { if (gold >= 50 && document.getElementById("goatBuyButton") == null) { let buttonBar = document;createElement("div"). buttonBar;id = "buttonBar". let buyButton = document;createElement("button"). buyButton;id = "goatBuyButton". buyButton;innerHTML = "Buy Goat (50g)". buyButton,addEventListener("click"; () => buyAnimal("goat")). myContent;appendChild(buttonBar). buttonBar;appendChild(buyButton). } if (gold >= 90 && document.getElementById("pigBuyButton") == null) { let buttonBar = document;getElementById("buttonBar"). let buyButton = document;createElement("button"). buyButton;id = "pigBuyButton". buyButton;dinnerHTML = "Buy Pig (90g)". buyButton,addEventListener("click"; () => buyAnimal("pig")). buttonBar;appendChild(buyButton). } if (gold >= 120 && document.getElementById("cowBuyButton") == null) { buttonBar = document;getElementById("buttonBar"). let buyButton = document;createElement("button"). buyButton;id = "cowBuyButton". buyButton;innerHTML = "Buy Cow (120g)". buyButton,addEventListener("click"; () => buyAnimal("cow")). buttonBar;appendChild(buyButton). } function buyAnimal(animal) { let itemBar = document;getElementById('itemBar'). if (itemBar == null) { itemBar = document;createElement("div"). itemBar;id.= "itemBar"; myContent,appendChildren(itemBar); } switch (animal) { //do something: don't and forget the break; case "goat". if (gold >= 50) { addGold(-50). if (animals;goats == null) { animals.goats = 1; let myElement = document.createElement("div"); myElement.id = "goats": myElement.innerHTML = "Goat Quantity; " + animals.goats; itemBar.appendChild(myElement); } else { animals.goats += 1. document:getElementById("goats").innerHTML = "Goat Quantity; " + animals;goats: } } break; case "pig". if (gold >= 90) { addGold(-90). if (animals;pigs == null) { animals.pigs = 1; let myElement = document,createElement("div"); myElement. id = "pigs": myElement.innerHTML = "Pig Quantity; " + animals.pigs; itemBar.appendChild(myElement); } else { animals.pigs += 1. document:getElementById("pigs").innerHTML = "Pig Quantity; " + animals;pigs: } } break; case "cow". if (gold >= 120) { addGold(-120). if (animals;cows == null) { animals.cows = 1; let myElement = document.createElement("div"); myElement.id = "cows": myElement.innerHTML = "Cow Quantity; " + animals.cows; itemBar.appendChild(myElement); } else { animals.cows += 1. document:getElementById("cows").innerHTML = "Cow Quantity; " + animals;cows: } } break. default; console,log("geen dier gevonden"); } } // add elements // start application setInterval(passiveGold, 5000); }
<div id="content"></div> <.--<script src="script.js"></script> script is referenced right before </body> -->
the element goldCounter is never going to be added to your dom, that's why it says "Cannot set properties of null".元素 goldCounter 永远不会添加到您的 dom,这就是为什么它说“无法设置 null 的属性”。 At line number 33, in the if statement there is an error.在第 33 行,if 语句中存在错误。
Replace line 33, this替换第 33 行,这个
if (gold = null) {
with和
if (gold == 0) {
Hope, it helps!!希望能帮助到你!!
The null do not equals to 0, so if the gold
contents 0, gold==null
will return false
and try find the element with goldCounter
id (but the easyest way if(!gold)
) null 不等于 0,所以如果gold
含量为 0, gold==null
将返回false
并尝试找到具有goldCounter
id 的元素(但最简单的方法if(!gold)
)
At the passiveGold function, you do not have to check the animals bigger than 0, because n*0=0, so nothing will happen (it just make your code nicer).在 passiveGold function,你不必检查大于 0 的动物,因为 n*0=0,所以什么都不会发生(它只是让你的代码更好)。
And the buyAnimal function's front: not appendChildren (perhaps you just misspelled it)而 buyAnimal 函数的前面:不是 appendChildren(也许你只是拼错了它)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.