所以我写了一段代码，其中有 9 个 div，我给了它们“.spaces”类，我希望它们在被点击时改变颜色。但只有第一个 div 将其颜色更改为红色，而其他 div 无论我点击多少次都不会。
这是 HTML
<body>
<div id="playground">
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
<div id="play-spaces" class = "spaces"></div>
</div>
<script src="script.js"></script>
这是 JavaScript
const spaces = document.querySelector(".spaces");
spaces.addEventListener("click",function(){
console.log("Space has been clicked");
spaces.style.backgroundColor = "red";
})
我期望当我点击一个 div 时，该特定的 div 会改变它的颜色。
你可以试试这个：-
<body>
<div id="playground">
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
</div>
<script>
const spaces = document.querySelectorAll(".spaces");
spaces.forEach(space => {
space.addEventListener("click", function() {
console.log("Space has been clicked");
this.style.backgroundColor = "red";
});
});
</script>