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

JavaScript
1

JavaScript :confused: I’m having no idea what to do here.

I have tried adding button1.onclick ,button2 and 3 respectively, after button3.innerText. I have also changed innerText to onclick. But both of them are wrong. I’m bit confused. Searched everywhere no Response.

My 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;

function goStore() {
  button1.innerText = "Buy 10 health (10 gold)";
  button2.innerText = "Buy weapon (30 gold)";
  button3.innerText = "Go to town square";
}

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; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

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

2

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.

3

Hi there and welcome to our community!

Just as you initialised the onclick methods above your goStore function, you should update them inside the function, by adding three lines of code below the existing innerText lines, using the updated values given in the challenge description.

4

I have tried doing that. But somehow it didn’t worked for me.

5

Can you share the code which you’ve tried please?

6

Screenshot (1)
Screenshot (1)1920×1080 145 KB

7

For future reference, please try to avoid sharing screenshots. It’s much easier to help you if you can share the code directly. You can post code by using the Preformatted Text tool (</> icon or CTRL+e), which will create two sets of triple backticks between which you can paste code, so that it displays correctly on the forum.

You shouldn’t be including quotation marks, as you are not trying to work with strings here. Compare with the way the onclick was initialised above your function.

9

Dude, I was not expecting, that it could be this easy. I don’t know how was I not able to get it. Thanks btw.

1 Like
10

It took me forever to figure out what I was doing wrong with this one! I was trying to camelCase my onclicks! I know I wasn’t in this discussion earlier, but you’ve both helped me figure this out. Thank you!

1 Like
11

Well, I normally don’t post, are asked any when here before this. I haven’t found the solution online. Happy to here that, I was able to help you. As this is a new curriculum they have added, so normally you won’t find much help online. But thanks to @igorgetmeabrain , we can feel free to ask this help forum. All the best for your new passion of learning.

12

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