JavascriptUncaughtTypeError：無法設定null的屬性（設定“innerHTML”）

我正在嘗試使用 javascript 自己制作 Farm Clicker 游戲。換句話說，當您單擊“添加金幣”按鈕時，玩家將擁有更多金幣，并且能夠用他獲得的金幣購買新動物。但在我的代碼中，我遇到了以下錯誤：script.js:42 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at addGold (script.js:42:54) at 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> -->

uj5u.com熱心網友回復：

元素 goldCounter 永遠不會添加到您的 dom 中，這就是為什么它說“無法設定 null 屬性”。在第 33 行，在 if 陳述句中有一個錯誤。

替換第 33 行，這

if (gold = null) {

和

if (gold == 0) {

希望能幫助到你！！

uj5u.com熱心網友回復：

您的代碼中的一個小錯誤：您應該附加到 addGold 函式的末尾

goldToAdd=0;

而passiveGold函式，你不必檢查大于0的動物，因為n*0=0，所以什么都不會發生（它只是讓你的代碼更好）。
而 buyAnimal 函式的前面：不是 appendChildren（也許你只是拼錯了）

標籤：javascript html 内部html

上一篇：如何處理建構式中的可為空引數？

下一篇：Javascript：當值為零時如何更改類和CSS