Javascript Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

Question

我正在尝试用 javascript 自己制作 Farm Clicker 游戏。换句话说，当您点击“添加金币”按钮时，玩家将拥有更多的金币并且能够用他赚取的金币购买新的动物。但是在我的代码中，我遇到了以下错误：script.js:42 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 在 addGold (script.js:42:54) 在 HTMLButtonElement。 (script.js:11:42)

这个错误是由什么引起的？我把代码留在下面。

// 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> -->

Answer 1

元素 goldCounter 永远不会添加到您的 dom，这就是为什么它说“无法设置 null 的属性”。在第 33 行，if 语句中有一个错误。

替换第33行，这个

if (gold = null) {

和

if (gold == 0) {

希望对你有帮助！！

Answer 2

null不等于0，所以如果gold内容为0，gold==null会returnfalse并尝试找到[=13=的元素] id（但最简单的方法if(!gold)）
在 passiveGold 函数中，你不必检查大于 0 的动物，因为 n*0=0，所以什么也不会发生（它只是让你的代码更好）。
而 buyAnimal 函数的前面：不是 appendChildren（也许你只是拼错了）

Javascript Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

Javascript Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

html

javascript

innerhtml