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

Tell us what’s happening:

I am extremely confused with the wording in this question. I have tried different variations of what I thought it means but it simply does not work.

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">
          <span id="monsterName">Monster Name: </span>
            <strong><span></span></strong>
        </span>
        <span class="stat">
          <span id="monsterHealth">Health: 
            <strong><span></span></strong>
        </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 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/123.0.0.0 Safari/537.36

Challenge Information:

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

You are closing off the span too early.

Also, the opening span with an id of monsterName goes inside the strong element.

I will agree, the instructions could be clearer.

“Give the first inner span element an id of monsterName and the second inner span element an id of monsterHealth.”

The inner spans being referred to here are the spans inside the strong elements.

So just to be clear, you should only be adding 4 spans instead of 6.

The request starts saying:

Similar to your #stats element

Let’s locate the #stats. Here it is:

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

The request continues:

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. Give the first inner span element an id of monsterName and the second inner span element an id of monsterHealth.

It is saying that you need to recreate the same concept that you did with the div id="stats" ... </div> but with the words that it is specifying now.
One div with an id value of monsterStats and two elements (two lines if you will) using the span tags with its respective ids, similar to the #stats.