Learn Basic JavaScript by Building a Role Playing Game - Step 45

JavaScript
1

Hello

This step says "Change the innerText property of the text to be `“You enter the store.” I did it, I passed the test but after adding

text.innerText = "You enter the store. ";

I click on the first button which calls the goStore function and the innerText of text do not change to the new text. Isn’t supposed to change?

edit. I moved text.innerText = “You enter the store.”; below
button3.innerText = “Go to town square”; and now it works. Any idea why this happens?

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

const button1 = document.querySelector('#button1');
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const text = document.querySelector("#text");
const xpText = document.querySelector("#xpText");
const healthText = document.querySelector("#healthText");
const goldText = document.querySelector("#goldText");
const monsterStats = document.querySelector("#monsterStats");
const monsterName = document.querySelector("#monsterName");
const monsterHealthText = document.querySelector("#monsterHealth");

// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;

function goStore() {
  button1.innerText = "Buy 10 health (10 gold)";
  button2.innerText = "Buy weapon (30 gold)";
  button3.innerText = "Go to town square";
  button1.onclick = buyHealth;
  button2.onclick = buyWeapon;
  button3.onclick = goTown;
  text.innerText = "You enter the store.";
  
}

function goCave() {
  console.log("Going to cave.");
}

function fightDragon() {
  console.log("Fighting dragon.");
}

function buyHealth() {

}

function buyWeapon() {

}

function goTown() {
  
}
1 Like
2

This question has been asked a couple of times now my best guess is the order which means asynchronous in JS.

1 Like
3

Because the three functions getting assigned to the onclick property have not been defined yet so running the function throws an error. If you open the browser console you can see the error.

If you move the text assignment to before them that code will run before the error is thrown (or if you comment them out) so it works.

  // no definition for the functions is in the code
  button1.onclick = buyHealth;
  button2.onclick = buyWeapon;
  button3.onclick = goTown;
1 Like
4

I checked it, you are right.

But the error stops the function? I thought after the error JS would go to the next line of code.

5

No, and that wouldn’t be a good idea if it did. An error means the program is in an error state so letting it continue to run is just asking for trouble.

console.log(willThrowAnError); // ReferenceError: willThrowAnError is not defined 
// The error is thrown here, so the rest of the code is not executed.
console.log('This will not run');
1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.