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

Tell us what’s happening:

Describe your issue in detail 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 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");
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."
  },

// User Editable Region

{
  name:cave,
  "button text":["Fight slime","Fight fanged beast","Go to town square"],
  "button functions":[fightSlime,fightBeast,goTown],
  text:"You enter the cave. You see some monsters."
}

// User Editable Region

];

// 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]);
}

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

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

function buyHealth() {

}

function buyWeapon() {

}

function fightSlime() {

}

function fightBeast() {

}

Your browser information:

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

Challenge Information:

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

{
name:cave,
“button text”:[“Fight slime”,“Fight fanged beast”,“Go to town square”],
“button functions”:[fightSlime,fightBeast,goTown],
text:“You enter the cave. You see some monsters.”
}
I didn’t quite understand the instructions, but I have 4 properties, but I need to make three? but according to the instructions, if you do it in such a way as to get 4 and how to understand this,

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

Add a third object to the locations array.

You are adding a new, third object to an array.

Give it the same properties as the other two objects.

The other objects have 4 properties, so this new item will also have 4 properties.


The step doesn’t understand your code because you have a syntax error.

If you open the console, you see this message

ReferenceError: cave is not defined

That’s due to this line:

There is no variable called cave, so this line isn’t going to work.

// running tests You should have three values in your

locations

array. Your third

locations

value should be an object. Your third

locations

object should have a

name

property with the value of

cave

. Your third

locations

object should have a

button text

property which is an array. Your

button text

property should have the string values

Fight slime

,

Fight fanged beast

, and

Go to town square

. Your third

locations

object should have a

button functions

property which is an array. Your

button functions

property should have the function values

fightSlime

,

fightBeast

, and

goTown

. Your third

locations

object should have a

text

property which is a string. Your third

locations

object should have a

text

property with the value of

You enter the cave. You see some monsters.

. // tests completed // console output Uncaught ReferenceError: cave is not defined undefined [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)] [TypeError: Cannot read properties of undefined (reading ‘2’)]
I have this in the console, I also can’t understand what’s the error? I need to create a global empty variable cave
?

I’m confused. Did you fix this? You are treating cave like a variable but it’s not supposed to be a variable. What did you do with the other name properties?

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