mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-12 03:00:53 -04:00
4.4 KiB
4.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a23c1d505bfa13747c8a9b | Step 17 | 0 | step-17 |
--description--
将数字 0、100 和 50 包含在 span 元素中,并将这些新的 span 元素包含在 strong 元素中。 然后分别为新的 span 元素设置 id 值为 xpText、healthText 和 goldText 。
--hints--
应该在第一个 .stat 元素中添加一个 strong 元素。
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);
第一个新的 strong 元素应该有一个 span 元素。
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
第一个嵌套的 span 元素应具有 id 值为 xpText。
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'xpText');
第一个 span 元素应该包裹在文本 0 周围。
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '0');
第一个 .stat 元素的文本仍应为 XP: 0。
const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText.trimEnd(), 'XP: 0');
应该在第二个 .stat 元素中添加一个 strong 元素。
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);
第二个新 strong 元素应该有一个 span 元素。
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
第二个嵌套的 span 元素应具有 id 值为 healthText。
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'healthText');
第二个 span 元素应包裹在文本 100 周围。
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '100');
第二个 .stat 元素的文本仍应为 Health: 100。
const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText.trimEnd(), 'Health: 100');
应该在第三个 .stat 元素中添加一个 strong 元素。
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);
第三个新 strong 元素应该有一个 span 元素。
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
第三个嵌套的 span 元素应具有 id 值为 goldText。
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'goldText');
第三个 span 元素应包裹在文本 50 周围。
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '50');
第三个 .stat 元素的文本仍应为 Gold: 50。
const stat = document.querySelectorAll('.stat')[2];
assert.equal(stat.innerText.trimEnd(), 'Gold: 50');
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
<title>RPG - Dragon Repeller</title>
<script src="./script.js"></script>
</head>
<body>
<div id="game">
<div id="stats">
--fcc-editable-region--
<span class="stat">XP: 0</span>
<span class="stat">Health: 100</span>
<span class="stat">Gold: 50</span>
--fcc-editable-region--
</div>
<div id="controls"></div>
<div id="monsterStats"></div>
<div id="text"></div>
</div>
</body>
</html>
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];