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

Questions

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

April 23, 2022

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

>Solution :

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