Learn Basic JavaScript by Building a Role Playing Game - Steps 51-69 clarification needed

Hello
No problems with getting through, i just don’t entirely understand how this code works now. We initialize button1 - onclick it calls update function which takes values from 2 array element of locations and then change other variables value with different parts of that array element??
Forgive me for the confusing wording …

Code so far:
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>

JS:

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": [goStore, 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, goTown],
    text: "You enter the store."
  },
];

// initialize buttons
button1.onclick = goStore;
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;
}

function goTown() {
  update(locations[0]);
}

function goStore() {
  update(locations[1]);
}

Hi! The update() function takes a location as a parameter. The locations are objects that have properties. When you click on each of the three buttons, it triggers the update() function. Let’s analyze the update function:

function update(location) {
:point_down: these three lines set the text of each button to the “button text” value of your location object. So you use location[“button text”] to enter the property and [0] to select the index 0 of the array of button texts. The same with [1] and [2]. For example: location[“button text”][1] of the store location is “Buy weapon (30 gold)”.
button1.innerText = location[“button text”][0];
button2.innerText = location[“button text”][1];
button3.innerText = location[“button text”][2];

:point_down: these three lines set the functions that will trigger when you click each of the three buttons. It works the same as the above (talking about the index). For example: location[“button functions”][1] of the store location is buyWeapon. So when you click button2, it will trigger the buyWeapon() function.
button1.onclick = location[“button functions”][0];
button2.onclick = location[“button functions”][1];
button3.onclick = location[“button functions”][2];

:point_down: this line of code sets the text of the “text” div to the text of the location object. You don’t access it with because it is a string, not an array with indexes.
text.innerText = location.text;
}

Hope it helps. :blush:

2 Likes

Thanks, i do know what those individual parts do, i was asking on a more general level.
Basically i was confused with function parameter (location) and how it was supposed to ‘connect’ to locations.
Thankfully i understood how it works after couple guide videos.

1 Like