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

JavaScript
1

Tell us what’s happening:

It seems to me that at this point the goTown and goStore functions are extraneous, as all they do is call the update function. So i treid just calling the update function directly wherever those functions previously appeared, but now none of the buttons in the preview are working. can you please explain to me whats going on here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
  </head>
  <body>
    <div id="game">
      <div id="stats">
        <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
        <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
        <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
      </div>
      <div id="controls">
        <button id="button1">Go to store</button>
        <button id="button2">Go to cave</button>
        <button id="button3">Fight dragon</button>
      </div>
      <div id="monsterStats">
        <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
        <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
      </div>
      <div id="text">
        Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #0a0a23;
}

#text {
  background-color: #0a0a23;
  color: #ffffff;
  padding: 10px;
}

#game {
  max-width: 500px;
  max-height: 400px;
  background-color: #ffffff;
  color: #ffffff;
  margin: 30px auto 0px;
  padding: 10px;
}

#controls,
#stats {
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #0a0a23;
}

#monsterStats {
  display: none;
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #ffffff;
  background-color: #c70d0d;
}

.stat {
  padding-right: 10px;
}

button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
}

/* file: script.js */
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 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");
const locations = [
  {
    name: "town square",
    "button text": ["Go to store", "Go to cave", "Fight dragon"],
    "button functions": [update(locations[1]), goCave, fightDragon],
    text: "You are in the town square. You see a sign that says \"Store\"."
  },
  {
    name: "store",
    "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
    "button functions": [buyHealth, buyWeapon, update(locations[0])],
    text: "You enter the store."
  }
];

// initialize buttons
button1.onclick = update(locations[1]);
button2.onclick = goCave;
button3.onclick = fightDragon;

function update(location) {
  button1.innerText = location["button text"][0];
  button2.innerText = location["button text"][1];
  button3.innerText = location["button text"][2];
  button1.onclick = location["button functions"][0];
  button2.onclick = location["button functions"][1];
  button3.onclick = location["button functions"][2];
  text.innerText = location.text;

// User Editable Region

}

// User Editable Region


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

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

function buyHealth() {

}

function buyWeapon() {

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

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

2

The onclick handler needs to be set to a function, which is then called each time someone clicks the button. You have set it to the result of a function. In other words, update(locations[1]) returns a value (generated once, at the time this line is executed) and button1.onclick is set to that return value (undefined in this case). So when you click on that button, no function is called because you haven’t set it to a function.

button1.onclick = goStore;

This sets the onclick handler to the goStore function. Now, when you click the button, the goStore function will be called.

Event handlers execute functions, so you need to assign them to a function, not a value.

3

but update is a function?

4

Yes, update is a function, but when you call it with parentheses then you are telling javascript to execute the function immediately, which will cause the function to return a value. It’s that value that you are setting the click handler to when you do:

button1.onclick = update(locations[1]);

Instead, you want to set the click handler to the actual function, not it’s return value. That way the click handler can execute the function when the button is clicked on.

5

Thank you for the explanation. I had thought that the click handler only executes things when clicked.
However i’m still not clear why it depends if the function has parentheses. is a function not called if there are no parenthesis? If so, what does happen when the click handler is clicked?

6

the click handler tries to call whatever it is assigned to it, if it’s a function good, if it’s not it gives an error and things don’t work. That’s why you need to give a function to the click handler and not a function call, if you assign a function call the function is already called and can’t be called from the click handler

1 Like
8

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