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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
Can’t figure it out. I have looked it up several times and tried but still can’t get it right. Step 4 asked me to : Wrap the numbers 0 , 100 , and 50 in span elements, and wrap those new span elements in strong elements. Then give your new span elements id values of xpText , healthText , and goldText , respectively.

Your code so far

<!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">

<!-- User Editable Region -->
        
    <span><strong><span id="xpText">XP: 0</span></strong></span>
<span><strong><span id="healthText">Health: 100</span></strong></span>
<span><strong><span id="goldText">Gold: 50</span></strong></span>
            
           

<!-- User Editable Region -->

        </div>
        <div id="controls"></div>
        <div id="monsterStats"></div>
        <div id="text"></div>
    </div>
</body>
</html>

Your browser information:

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

Challenge Information:

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

1 Like
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

“Wrap the numbers 0, 100, and 50 in span elements…”

You didn’t just wrap the numbers, you wrapped the text as well.

4

So, I wrapped the numbers and the text but I wasn’t able to figure out how to just wrap the numbers. How do I separate it? I am lost. Thank you so much for your help.

5

I’m not sure how to answer this other than just to put the span element around the number, not both the text and the number.

If I gave you the p element:

<p>This is a test element</p>

And asked you to wrap just the word “test” in a span, could you do it? If so, then it’s the same concept for just wrapping the number in a span.

6 
<p>This is a <span>test</span> element</p>

It should be like this, right? I tried it, but it didn’t work. So I am still confused. Thanks

7 
<p>This is a <span>test</span> element</p>
8

I typed out the span around the test word but it didn’t come up.

9

I’ve edited your code for readability. 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 (').

10

you need to do a similar thing with the numbers, wrap the numbers only in a span element. Post your new code for more help

11

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