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

JavaScript
1

Tell us what’s happening:

In the code below, I’ve wrapped the word Store in double quotes within the text.innerText line, but the console says: " You should wrap the text Store in double quotes.

I have keenly gone through the code looking for potential bugs but can’t see.

Could you please suggest a fix?

function goTown () {
button1.innerText = “Go to store”;
button2.innerText = “Go to cave”;
button3.innerText = “Fight dragon”;
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDr

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

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


// User Editable Region

function goTown() {
  button1.innerText = "Go to store";
  button2.innerText = "Go to cave";
  button3.innerText = "Fight dragon";
  button1.onclick = goStore;
  button2.onclick = goCave;
  button3.onclick = fightDragon;
  text.innerText  = 'You are in the town square. You see a sign that says "Store"';
}

// 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;
  text.innerText = "You enter the store.";
}

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

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

function buyHealth() {

}

function buyWeapon() {

}

/* 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;
}

Your browser information:

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

Challenge Information:

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

2

You have missing the quote scape character

3

the quotes are there sir

4

Yes, that it. But you need to use the quote escape character to show that double quote marks in the string.

5

Read the instructions carefully: You need to wrap the text Store in double quotes. Because your string is already wrapped in double quotes, you’ll need to escape the quotes around Store. You can escape them with a backslash \.
Example code:

const escapedString = "Naomi likes to play \"Zelda\" sometimes.";

Your code:

Can you see any difference?

6

I have made the following improvement but the console message is still the same.

text.innerText = "You are in the town square. You see a sign that says \"Store\"";

text.innerText = "You are in the town square. You see a sign that says \"Store\"";
7

Please post your full updated code.

8

Yes I can sir. The back slashes. \

9

Here is my full updated code.

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

// initialize buttons

button1.onclick = goStore;

button2.onclick = goCave;

button3.onclick = fightDragon;

function goTown() {

button1.innerText = "Go to store";

button2.innerText = "Go to cave";

button3.innerText = "Fight dragon";

button1.onclick = goStore;

button2.onclick = goCave;

button3.onclick = fightDragon;

text.innerText = "You are in the town square.You see a sign that says \"Store\" ";

}

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 = "You enter the store.";

}

function goCave() {

console.log("Going to cave.");

}

function fightDragon() {

console.log("Fighting dragon.");

}

function buyHealth() {

}

function buyWeapon() {

}
10

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

11

You must use the correct spaceing and punctuation at the end of this sentence.

12

Even after making this correction to the word "Store" "; console still insists prints the same error

13

And again when I type the backslash in the clipboard it appers, but when I send the message in the question dashboard , the slashes disappear.

14

Hey there,
the text has a period . at the end, doesn’t it? You may be missing that.
Good luck!

15

That doesn’t have the correct punctuation.

16

What is the appropriate punctuation sir ? Kindly share I’ve tried single, double, squeezed, spaces and none has worked.

17

you are missing the period at the end of the sentence fro once. You can restore the string by resetting the step, then adding the quotes around the word Store again

18

Thank you so much. It worked.