DOM 操作：認為有用
以下部分問題需要您編寫一些DOM 操作程式碼來完成——例如，透過 JavaScript 建立新的 HTML 元素，將其文字內容設定為等於特定的字串值，並將它們巢狀在頁面上現有的元素內部。
我們尚未在課程中明確教授過這部分內容，但您應該會看到一些使用了它的示例，我們希望您能夠自行研究需要哪些 DOM API 來成功回答問題。一個好的起點是我們的DOM 指令碼入門教程。
事件 1
我們第一個與事件相關的任務涉及一個 <button>，當它被點選時，會更新其文字標籤。HTML 不應被修改；只需修改 JavaScript。
要完成此任務，請建立一個事件監聽器，該監聽器在按鈕（btn）被點選時更改其內部的文字，並在再次點選時將其改回。
js
const btn = document.querySelector("button");
// Add your code here
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
if (btn.className === "on") {
btn.textContent = "Machine is off";
btn.className = "off";
} else {
btn.textContent = "Machine is on";
btn.className = "on";
}
});
事件 2
現在我們來看看鍵盤事件。
要完成此任務，請建立一個事件監聽器，當按下鍵盤上的 WASD 鍵時，該監聽器會移動提供的畫布上的圓圈。圓圈使用 drawCircle() 函式繪製，該函式接受以下引數作為輸入：
x— 圓圈的 x 座標。y— 圓圈的 y 座標。size— 圓圈的半徑。
警告： 在測試程式碼時，您必須在嘗試鍵盤命令之前聚焦畫布（例如，單擊它，或使用鍵盤 Tab 鍵切換到它）。否則它們將不起作用。
js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
function drawCircle(x, y, size) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(x, y, size, 0, 2 * Math.PI);
ctx.fill();
}
let x = 50;
let y = 50;
const size = 30;
drawCircle(x, y, size);
// Don't edit the code above here!
// Add your code here
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
// ...
// Don't edit the code above here!
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "a":
x -= 5;
break;
case "d":
x += 5;
break;
case "w":
y -= 5;
break;
case "s":
y += 5;
break;
}
drawCircle(x, y, size);
});
事件 3
下一個事件相關的任務將測試您對事件冒泡的知識。我們希望您在 <button> 的父元素（<div class="button-bar"> … </div>）上設定一個事件監聽器，當點選任何按鈕時被呼叫時，它會將 button-bar 的背景設定為按鈕的 data-color 屬性中包含的顏色。
我們希望您在不遍歷所有按鈕併為每個按鈕設定自己的事件監聽器的情況下解決此問題。
js
const buttonBar = document.querySelector(".button-bar");
// Add your code here
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
const buttonBar = document.querySelector(".button-bar");
function setColor(e) {
buttonBar.style.backgroundColor = e.target.getAttribute("data-color");
}
buttonBar.addEventListener("click", setColor);