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

JavaScript
1

Can anyone help with this please?
“Now you need to modify your display text. Change the innerText property of the text to be You enter the store. .”

FAIL: " Sorry, your code does not pass. Hang in there.

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

Your code so far

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;
document.getElementById(‘text’).innerText = “You enter the store.”;

<!-- 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)";
  button2.innerText = "Buy weapon (30 gold)";
  button3.innerText = "Go to town square";
  button1.onclick = buyHealth;
  button2.onclick = buyWeapon;
  button3.onclick = goTown;
  document.getElementById('text').innerText = "You enter the store.";
}

/* User Editable Region */


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

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

Your browser information:

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

Challenge Information:

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

1 Like
2

Hi. You have already initialised the text element, so you don’t have to do that again. Just access it by it’s variable name.

3

Thank you so much but it still is an error apparently

4

Im not sure exactly what it is im trying to do to be honest, so im finding researching it confusing

5

Hi, thank you. Ive tried this but its still saying its incorrect:

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;
const text = document.querySelector(“#text”);

" Sorry, your code does not pass. Keep trying.

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

What should I do please?

6

Hi, thank you. Ive tried this but its still saying its incorrect:

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;
const text = document.querySelector(“#text”);

" Sorry, your code does not pass. Keep trying.

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

What should I do please?

7

You should not repeat this code.

const text = document.querySelector("#text");

It is already at the top of the file. So you already have access to the text element using the text variable.

Use the variable text and access the .innerText property on it.

Example:

element.innerText

Assign the string to that property.

Example:

element.innerText = "Some string value"

Edit: just to be clear, element in the above code would be text in the challenge.

8

Thank you for you reply. Ive tried this and it is still saying it is incorrect.
text.innerText = “text”

9

Thank you for you reply. Ive tried this and it is still saying it is incorrect.
text.innerText = “text”

10

That is not the text you are asked to assign it.

Change the innerText property of the text to be You enter the store.

11

Thank you. Like this? text.innerText = “You enter the store.”

12

I did this: text.innerText = “You enter the store.” but its still saying its not correct?

13

That should pass but you need to make sure you are using the correct quotes, standard double "" or single '' quotes.

This is what you have now and it should pass as long as you don’t make other changes.

text.innerText = "You enter the store."

If it still doesn’t pass try resetting and do it again.

If you need help post all of the function code. Add triple backticks around your code when posting it on the forum.

2 Likes
14

Hi, I tried it with double quotes but its still saying its incorrect?
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 (“Text”)

Any ideas please?

16

Thank you, mush appreciated

1 Like
17

— solution removed by mod —

18

Hi there! Posting solutions is not allowed here on the forum

19

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

20

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