2.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a3b79d520a7f3d0e25afd6 | Schritt 19 | 0 | step-19 |
--description--
JavaScript interagiert mit HTML über das Document Object Model, oder DOM. Das DOM ist ein Baum von Objekten, der den HTML-Code darstellt. Du kannst auf den HTML-Code über das document-Objekt zugreifen, das dein gesamtes HTML-Dokument darstellt.
Eine Methode, um bestimmte Elemente in deinem HTML zu finden, ist die Methode querySelector(). Die querySelector()-Methode nimmt einen CSS-Selektor als Argument und gibt das erste Element zurück, das mit diesem Selektor übereinstimmt. Um zum Beispiel das <h1>-Element in deiner HTML zu finden, würdest du schreiben:
let h1 = document.querySelector("h1");
Beachte, dass h1 einen String darstellt und dem CSS-Selektor entspricht, den du verwenden würdest.
Erstelle eine button1-Variable und verwende querySelector(), um sie deinem Element mit der id "button1" zuzuweisen. Denke daran, dass bei id-CSS-Selektoren ein # vorangestellt wird.
--hints--
Du solltest let verwenden, um eine button1-Variable zu deklarieren.
assert.match(code, /let\s+button1/);
Du solltest document.querySelector() verwenden.
assert.match(code, /document\.querySelector/);
Du solltest den #button1-Selektor verwenden.
assert.match(code, /querySelector\(('|")#button1\1\)/);
--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 currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
--fcc-editable-region--
--fcc-editable-region--