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

Question

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

There are many multiple mistakes in your code. Most probably you are getting your current error from this line itemBar.id != "itemBar"; Here's another mistake in your code myElement,id = "pigs"; that you'll encoutner after current error is resolved. — Kritish Bhattarai
– Kritish Bhattarai, Commented Apr 23, 2022 at 12:28
@kritiz Oh yes you are right. There were a few typos I missed. Thanks for reporting it. Unfortunately, I still get the InnerHTML error even though I fixed the errors you showed. — Matjaz
– Matjaz, Commented Apr 23, 2022 at 12:35

ps2708 · Accepted Answer · 2022-04-23 12:44:09Z

2

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

edited Apr 23, 2022 at 12:44

answered Apr 23, 2022 at 12:38

ps2708

1229 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matjaz Over a year ago

Unfortunately it didn't work

ps2708 Over a year ago

Still same error??

Matjaz Over a year ago

Yes, i got the same error

ps2708 Over a year ago

Got it, the gold won't be null, it will be 0. Edited the code, please try it now!!

user17517503 · Accepted Answer · 2022-04-23 13:16:31Z

-1

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)

edited Apr 23, 2022 at 13:16

answered Apr 23, 2022 at 13:01

user17517503

16711 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related