如何更改单击按钮的背景颜色

Question

我是一个初学者，想知道如何改变所有按钮的背景颜色点击?

var buttons = document.querySelectorAll(".btn").length;
for (var i = 0; i < buttons; i++) {
document.querySelectorAll(".btn")[i].addEventListener("click", function () {
document.querySelectorAll(".btn").style.backgroundColor = "red";
});
}

<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>

Answer 1

querySelectorAll返回一个NodeList。您必须遍历它并将样式应用于每个项目:

var buttons = document.querySelectorAll(".btn").length;
for (var i = 0; i < buttons; i++) {
document.querySelectorAll(".btn")[i].addEventListener("click", function (e) {
document.querySelectorAll(".btn").forEach(e => e.style.backgroundColor = "red")
});
}

<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>