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. 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: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> -->

CodePudding user response：

the element goldCounter is never going to be added to your dom, that's why it says "Cannot set properties of null". At line number 33, in the if statement there is an error.

Replace line 33, this

if (gold = null) {

with

if (gold == 0) {

Hope, it helps!!

CodePudding user response：

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))
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).
And the buyAnimal function's front: not appendChildren (perhaps you just misspelled it)