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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
My answer is all-time declined

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" class="button1">Go to store</button>
        <button id="button2" class="button2">Go to cave</button>
        <button id="button3" class="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;
}


/* User Editable Region */

.button1, .button2, .button3 {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
}

/* User Editable Region */


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

Your browser information:

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

Challenge Information:

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

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

Welcome @muriell.htc ! What was the instruction for this step and what errors or hints were you getting when you submitted?

4

Step 32

Finally, you will need to add some styles for your buttons. Start by setting the cursor property to pointer. Then set the text color to #0a0a23 and the background-color to #feac32.

Then set the background-image property to linear-gradient(#fecc4c, #ffac33). Lastly, set the border to 3px solid #feac32.

And then is my answer:

#button1,
#button2,
#button3 {
cursor: pointer;
color: #0a0a23;
background-color: #feac32;
background-image: linear-gradient(#fecc4c, #ffac33);
border: 3px solid #feac32;
}

And its a consolo log of errors:

// running tests
You should have a button selector.
Your button selector should have a cursor property set to pointer.
Your button selector should have a color property set to [#0a0a23].
Your button selector should have a [background-color] property set to [#feac32].
Your button selector should have a [background-image] property set to ]linear-gradient(#fecc4c, #ffac33)] .
Your button selector should have a [border] property set to [3px solid #feac32].
// tests completed

5

it wants a selector for the html element button, not for the three ids

6

I already try it.
In the *.html it was:

<button id="button1">Go to store</button>

then I added class class=“button1”

<button id="button1" class="button1">Go to store</button>

And in console became the same error. And with one class=“button” for all 3 buttons. And with one of each like button1, button2, button3. All the time is the same error.

7

I mean in the css file, you should have a selector for the button html element that selects any button ever existing

8

Yes.
I already chanhe code in *.css for one of this, like:

.button {
}
#button{
}
#button1, #button2, #button3 {
}

All the time I’ve the same error

9

not a class of button, just the element, remove the period

10

In my *,html :

<div id="controls">
        <button id="button1" class="button">Go to store</button>
        <button id="button2" class="button">Go to cave</button>
        <button id="button3" class="button">Fight dragon</button>
      </div>

an in *.css is:

.button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
}

And all the time when I changed id or class in html with the same changing in css for selector(s) at id like # or class like .%class_name%, I’ve the same error:

// running tests
You should have a button selector.
Your button selector should have a cursor property set to pointer.
Your button selector should have a color property set to #0a0a23.
Your button selector should have a background-color property set to #feac32.
Your button selector should have a background-image property set to linear-gradient(#fecc4c, #ffac33).
Your button selector should have a border property set to 3px solid #feac32.
// tests completed
11

Yes, in your css remove the period at the beginning of the selector so that you select the button element and not the element with class="button"

1 Like
12

omg :rofl:

overminded solution

14

I had a whole question written up because I used your tips above and was STILL getting errors… turns out I accidently deleted one } in the .stat {} above the button selector :roll_eyes:

Gotta check all the code closely lololol :melting_face:

15

thank you. ive been lookin AT THIS CODE FOR PAST 2 DAYS AND THANK YOU FOR MENTIONING CUS ID GIVE UP

16

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