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

Tell us what’s happening:

why isn’t my code passing? I am lost and need help with this.

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>

<!-- User Editable Region -->

      <div id="monsterStats">
       <span class="stat"><strong>Monster Name:</strong><span id="monsterName"></span>
       <span class="stat"><strong>Health:</strong><span id="monsterHealth"></span>
      </div>

<!-- User Editable Region -->

      <div id="text"></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");

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

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

Btw, I just added the two last span closing tags but it is still not passing.

Looks like you are missing some spaces after each colon.

tried that but this is what is says:

´ Your first span element should have a strong element with an empty nested span element.´

Please post the new code

 <div id="monsterStats">
       <span class="stat"><strong>Monster Name: </strong><span id="monsterName"></span></span>
       <span class="stat"><strong>Health: </strong><span id="monsterHealth"></span></span>
      </div>

I have seen some people put the strong element after the name but that doesn’t make the text darker so i don’t see a point in that.

That is what the step wants though:

After the text in each, add a strong element with an empty nested span element.

what does nested actually mean though?

This:

<p>I am going to nest <p>one element</p> inside another</p>

yeah ok, so I should nest the strong element in those two span elements?

No the opposite.

The strong element has the nested span.

so my strong closing tag should be in the middle of those two last?

No the opposite.

The strong element is the one that has the spans nested within it.

got it! Thanks for the help.

1 Like