2.3 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a3b79d520a7f3d0e25afd6 | Step 15 | 0 | step-15 |
--description--
JavaScript interacts with the HTML using the Document Object Model, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the document object, which represents your entire HTML document.
One method for finding specific elements in your HTML is using the querySelector() method. The querySelector() method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the <h1> element in your HTML, you would write:
let h1 = document.querySelector("h1");
Note that h1 is a string and matches the CSS selector you would use.
Create a button1 variable and use querySelector() to assign it your element with the id of button1. Remember that CSS id selectors are prefixed with a #.
--hints--
You should use let to declare a button1 variable.
assert.match(code, /let\s+button1/);
You should use document.querySelector().
assert.match(code, /document\.querySelector/);
You should use the "#button1" selector.
assert.match(code, /querySelector\(\s*('|")#button1\1\s*\)/);
--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">
<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>
<div id="monsterStats"></div>
<div id="text"></div>
</div>
</body>
</html>
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
--fcc-editable-region--
--fcc-editable-region--