---
id: 62a23c1d505bfa13747c8a9b
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
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.
# --hints--
You should add a `strong` element in your first `.stat` element.
```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```
Your first new `strong` element should have a `span` element.
```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```
Your first nested `span` element should have the `id` of `xpText`.
```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'xpText');
```
Your first `span` element should be wrapped around the text `0`.
```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '0');
```
The text of your first `.stat` element should still be `XP: 0`.
```js
const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText, 'XP: 0');
```
You should add a `strong` element in your second `.stat` element.
```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```
Your second new `strong` element should have a `span` element.
```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```
Your second nested `span` element should have the `id` of `healthText`.
```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'healthText');
```
Your second `span` element should be wrapped around the text `100`.
```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '100');
```
The text of your second `.stat` element should still be `Health: 100`.
```js
const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText, 'Health: 100');
```
You should add a `strong` element in your third `.stat` element.
```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```
Your third new `strong` element should have a `span` element.
```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```
Your third nested `span` element should have the `id` of `goldText`.
```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'goldText');
```
Your third `span` element should be wrapped around the text `50`.
```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '50');
```
The text of your third `.stat` element should still be `Gold: 50`.
```js
const stat = document.querySelectorAll('.stat')[2];
assert.equal(stat.innerText, 'Gold: 50');
```
# --seed--
## --seed-contents--
```html
RPG - Dragon Repeller