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

JavaScript
1

Tell us what’s happening:

The console is saying I should update the button1 innerText even though I did this in the previous step and now it refusing to pass though nothing wrong
Any help?

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");

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


// User Editable Region

function goStore() {
  button1.innerText = "Buy 10 health (10 gold)";
}

// User Editable Region


function goCave() {
  button2.innerText = "Buy weapon (30 gold)";
}

function fightDragon() {
  button3.innerText = "Go to town square";
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/119.0.6045.169 Mobile/15E148 Safari/604.1

Challenge Information:

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

2

I am not getting the same error message as you.
When I test your code and click on the button I get this error message

You should use dot notation to access the innerText property of button2 .

maybe try resetting the lesson or clearing the cache and trying again.

2 Likes
3

this step keeps working on the goStore function, you should not add code to other functions in this step

2 Likes
4

I did reset the test and even cleared the caches but nothing happened still saying I should update the goStore function!


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)";
}

function goCave() {
  button2.innerText = "Buy weapon (30 gold)";
}

function fightDragon() {
  button3.innerText = "Go to town square";
}
5

I did removed the codes from other function but nothing happened as well.

6

This is not correct

when I open the lesson, I see this code here

Screenshot 2024-04-24 at 11.37.23 AM
Screenshot 2024-04-24 at 11.37.23 AM1022×548 40.3 KB

You need to make sure to have the correct starting code to remove the issues you are running into

Here is the complete starting code I have on my end

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)";
}

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

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

I don’t know what is the issue here but goStore which is button on I have already did it in the previous step 38 I did removed the console.log and did the update,
But for this step I suppose to deal only with button 2 and 3 goCave and fightDragon and it sounds right cuz when I previewed it it worked but I don’t know what is wrong here!

8

You need to change the button2 and button3 innerText inside the goStore

function goStore() {
  button1.innerText = "Buy 10 health (10 gold)";
  // changes go inside here
}

The reason why it needs to be inside there is because in future steps you are going to have all of your button logic inside just one function called update.
Instead of spreading out your button logic across three different functions like you are doing now

hope that helps

1 Like
9

Your all three button innerText and strings should be within goStore function.

1 Like
10

Hello!!! Pay attention to the prompt: Now add the text for button2 and button3. It doesn’t tell you to add them in other functions, so where did you add the first text???"

11

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