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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

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>
    <script src="./script.js"></script>
  </head>

<!-- User Editable Region -->

  <body>
    <div>
    <div id="game">
      </div>
    </div>
  </body>
Wait,4 divs?!?!

<!-- User Editable Region -->

</html>

/* file: script.js */
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

Your browser information:

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

Challenge Information:

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

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

the new divs need to go inside #game, remove the one you have added around div and add the 4 divs inside #game

reate four div elements within your #game element.

4

I did that and i gave all my div elements a id but it still does not work

5

can you show your updated code?

6 
<body>
  <div id="game">
    <div id="stats"></div>
    <!-- Put the other 3 divs here... -->
  </div>
</body>

I hope this tip helps. Just do the other three like the first one that I have shown you.

8

Your code is not visible, you need to format it correctly. 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 
body>
    <div id="stats">
    <div id="controls">
      <div id="monsterStats">
    <div id="text">
    <div id="game"> </div>
    </div>
    </div>
    </div>
    </div>
  </body>
<!-- Thank you! --!>
12

they are not inside the #game div

13

Your stats, controls, text, and monsterStats divs all need to be inside the game div.

14

Just another quick tip for you: You have the syntax for an HTML comment 90% correct, but you end the comment with -->. You only use the exclamation point at the beginning of the HTML comment. But great job learning how to post code in here… It can be tricky to learn at first.

An HTML comment should look like this with only one exclamation point:

<!-- Thank you! -->
15 
<body>
   
   <div id="stats">
     <div id="controls">
       <div id="monsterStats"
       ><div id="text">
          <div id="game">        
          </div>
   </div>
   </div>
   </div>
   </div>
    
  </body>
<!-- Here is my new code -->
16

You have your game div inside all the other divs, which isn’t right. All the other divs need to be inside that one. Also you need to close each of the four divs with </div> before adding another one. I’ll show you how the first two should look:

<body>
  <div id="game">
    <div id="stats"></div>
    <div id="controls"></div>
    <!-- Put the next 2 divs here... -->
  </div>
</body>
17 
<!-- THANK YOU! 
full code: -->
          <div id="game">
            <div id="stats"></div>
     <div id="controls"></div>
       <div id="monsterStats"></div>
         <div id="text"></div>
         
          </div>
18

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