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

Programming JavaScript
1

Now you need to modify your display text. Change the innerText property of the text to be You enter the store. .

function goStore() {
button1.innerText = “You enter the store.”;
button2.innerText = “Buy weapon (30 gold)”;
button3.innerText = “Go to town square”;
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;

}

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

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

2

you should have a text.innerText that says “You enter the store”

3

Thanks, it worked!
I t says the reply should be longer, I don’t see the point, but anyway…

4

yes it is very annoying, considering they love talking about how lazy coders are and doing things in less keystrokes. a complete contradiction. but, anyway…
idk about you, but I am pretty frustrated. Its almost like I should go learn javascript somewhere and then come back, its like they are assuming you know the syntax and order of things. “update” the button? the language is confusing as hell; I am not updating the button, I am creating an entirely different action. This step tells you to “modifying” the innertext by “changing” the text… there is no inner text. there is nothing to modify. Maybe it will get better. I will continue…

5

Well, my friend. Let me tell , you, this is not an easy path, wherever you want to go and study. I live in Europe, and here there are a lot of bootcamps that offer to teach, but you have to pay thousands of euros for the same type of training you can get here, and here it’s for free!!!
My suggestion would be not just try to pass a challenge, but use chatGPT, Bard of whatever AI tool avaliable to try to understand the deep concept of the challenge. Nowadays, AI tools are wonderful companions for learning, and that is the way we have to use them , to help us undertstand , not just to go there for answers for a test.
For example, I am working of “Building a spreadsheet” project. This has been the most challenging project here, up to this point. What am I doing? I suggest the 4 Why’s: Why a? answer: because of b. Why b? answer: because of c. Why c? because of d…

6

By the way, I am not implying that you or someone else is just doing “copy/paste”. This is the method that has work for me and I am just trying to share it with others. Great Day!!!