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

JavaScript
1

Hello everyone. I am stuck in this exercise and I need your help.
This is my code:

XP: 0 Healh: 100 Gold: 50
Go to store Go to cave Fight dragon 
    </div>
    <div id="monsterStats">
        <span class="stat">Monster Name: 
            <strong>
                <span></span>
            </strong>
        </span>
        <span class="stat">Health: 
            <strong>
                <span></span>
            </strong>
        </span>
    </div>
    <div id="text"></div>
</div>

What I have to solve is:

Step 6

Similar to your #stats element, your #monsterStats element needs two span elements. Give them the class stat and give the first element the text Monster Name: and the second the text Health: . After the text in each, add a strong element with an empty nested span element.

2

You will have better luck with the tests if you put all of the code for the Monster Name span on the same line and all of the code for the Health span on one line. Technically, it shouldn’t matter, but that’s what the tests are looking for.

In general, I would not add new lines except where necessary.

3

If I write it this way:

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

I have this error:
Your strong and span elements should come after the text.

However, if I write the code on multiple lines, I get the following error:
Your second span element should have the text Health: . Make sure the spacing is correct.

What could be wrong?

4

Hmm, that passes for me. Is there a chance you accidentally changed something else?

5

From my point of view, both ways are fine. I even checked it with chatGPT and this is the result:

<div id="monsterStats">
  <span class="stat">Nombre del Monstruo:<strong><span></span></strong></span>
  <span class="stat">Salud:<strong><span></span></strong></span>
</div>
6

You definitely need to have a space after the string and before the strong element.

If you still can’t figure it out then paste all of your HTML in here so we can help you find the mistake.

7 
<body>
    <div id="game">
        <div id="stats">
            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
            <span class="stat">Healh: <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></span>
                </strong>
            </span>
            <span class="stat">Health: 
                <strong>
                    <span></span>
                </strong>
            </span>
        </div>
        <div id="text"></div>
    </div>
    <script src="app.js">


    </script>
</body>
8

I’m confused. I thought we agreed that everything needed to be on the same line for those two new spans you are adding. That’s all I needed to do to get your code to pass.

9

I’m sorry.

<body>
    <div id="game">
        <div id="stats">
            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
            <span class="stat">Healh: <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></span></strong></span>
            <span class="stat">Health: <strong><span></span></strong></span>
        </div>
        <div id="text"></div>
    </div>
    <script src="app.js">


    </script>
</body>
10

So are you saying that this isn’t passing for you? Because it is passing for me. If it is not passing for you, then you might have a browser extension that is interfering with the tests (such as a dark mode extension). If so, try disabling them. Or try a different browser that doesn’t have any extensions.

11

[quote=“lesker53, post:9, topic:660306”]
Thank you. I was already getting frustrated

1 Like
12

Monster Name:
Health: