2.5 KiB
2.5 KiB
id | title | challengeType | dashedName |
---|---|---|---|
62a23cb9bc467a147516b500 | Step 5 | 0 | step-5 |
--description--
For your #controls
element, create three button
elements. The first should have the id
set to button1
, and the text Go to store
. The second should have the id
set to button2
, and the text Go to cave
. The third should have the id
set to button3
, and the text Fight dragon
.
--hints--
You should add three button
elements to your #controls
element.
const buttons = document.querySelectorAll('#controls > button');
assert.exists(buttons);
assert.equal(buttons.length, 3);
Your first button should have the id
set to button1
.
const buttons = document.querySelectorAll('#controls > button');
const button1 = buttons[0];
assert.equal(button1.id, 'button1');
Your first button should have the text Go to store
.
const buttons = document.querySelectorAll('#controls > button');
const button1 = buttons[0];
assert.equal(button1.innerText, 'Go to store');
Your second button should have the id
set to button2
.
const buttons = document.querySelectorAll('#controls > button');
const button2 = buttons[1];
assert.equal(button2.id, 'button2');
Your second button should have the text Go to cave
.
const buttons = document.querySelectorAll('#controls > button');
const button2 = buttons[1];
assert.equal(button2.innerText, 'Go to cave');
Your third button should have the id
set to button3
.
const buttons = document.querySelectorAll('#controls > button');
const button3 = buttons[2];
assert.equal(button3.id, 'button3');
Your third button should have the text Fight dragon
.
const buttons = document.querySelectorAll('#controls > button');
const button3 = buttons[2];
assert.equal(button3.innerText, 'Fight dragon');
--seed--
--seed-contents--
<!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>
--fcc-editable-region--
<div id="controls">
</div>
--fcc-editable-region--
<div id="monsterStats"></div>
<div id="text"></div>
</div>
</body>
</html>