TypeError: monsterNameText is null

[nychm]

I’ve been watching (and following step-by-step) the Full Stack Web Development for Beginners video posted by freeCodeCamp.org on YouTube and currently I’m at the stage where he’s making an RPG game using HTML, JS and CSS. After making additions, updates etc he says to run the game to test it but I keep coming across this same error. He tests the code @ 4:26:55 time stamp and I followed the same steps as he does, yet he doesn’t get any errors.

The error displayed is

“TypeError: monsterNameText is null
https://14f0e92b-b00f-4112-81a6-bff65385c2d9.id.repl.co/script.js:196”

and occurs after clicking the Fight Slime button.

function goFight() {
update(locations[3]);
monsterHealth = monsters[fighting].health;
monsterStats.style.display = “block”;
monsterNameText.innerText = monsters[fighting].name;
monsterHealthText.innerText = monsterHealth;
}

[nychm]

Repl link: https://replit.com/@nychm/htmltutorial#script.js

[SharkCoding]

It appears that somehow you may have used a character that looks really similar to one of the letters, but is actually different. When I did Ctrl+F to find it, it showed up as different from where you defined it. I would just copy the text from where you defined it and paste it into the other places.

[nychm]

When I did Ctrl+F it shows the same as when I defined it, but even after copying and pasting from where I defined it the error still occurs.

[Coder100]

Hey, in the HTML if you notice, you have:

      <span class="stat">Monster Name: <strong><span id ="monsterName"></span></strong></span>
      <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>

as you can see the id doesn’t include text. So either add text to the id, or remove it from script.js lines 17-18

Repl: example code

happy coding!

[SharkCoding]

That is really strange because when I do Crtl+F look what happens. It only shows those two things and not the one below

[Coder100]

no, the id itself is wrong you should have

const monsterNameText = document.querySelector("#monsterName");

please look at the repl I attached: click here

and compare results