点击div无法变色求助：仅首个带.spaces类的div响应点击变色

你遇到的问题有两个核心原因：

• HTML里多个div重复使用同一个id play-spaces，id在页面中必须唯一，这是DOM规范的基本要求，虽然这不是直接导致点击无响应的原因，但必须修正。
• JS里用document.querySelector(".spaces")只会选中页面中第一个匹配.spaces的元素，所以只有第一个div绑定了点击事件，剩下的8个都没绑定。而且就算绑定了，你现在的事件处理函数里修改的是一开始选中的spaces变量对应的元素，不是你点击的那个div。

修正步骤 #

1. 修复HTML的id问题

把重复的id删掉（如果不需要id的话），或者改成唯一值，示例如下：

<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 src="script.js"></script>
</body>

2. 修正JavaScript代码（两种可选方案）

方案一：遍历所有.spaces元素，逐个绑定事件

用document.querySelectorAll(".spaces")获取所有匹配的元素，遍历后给每个元素绑定点击事件，通过this或event.target定位当前点击的div：

// 获取所有带.spaces类的元素
const spaces = document.querySelectorAll(".spaces");

// 遍历每个元素绑定点击事件
spaces.forEach(space => {
    space.addEventListener("click", function() {
        console.log("Space has been clicked");
        // 修改当前点击元素的背景色
        this.style.backgroundColor = "red";
        // 也可以用 event.target：event.target.style.backgroundColor = "red";
    });
});

方案二：事件委托（更高效，推荐）

给父元素#playground绑定一次点击事件，利用事件冒泡机制处理子元素的点击，这种方法不需要给每个div单独绑定事件，尤其适合元素数量多或者动态添加元素的场景：

// 获取父元素
const playground = document.getElementById("playground");

playground.addEventListener("click", function(event) {
    // 判断点击的元素是否是.spaces类的div
    if (event.target.classList.contains("spaces")) {
        console.log("Space has been clicked");
        event.target.style.backgroundColor = "red";
    }
});

这样修改后，点击任意一个带.spaces类的div，都会触发变色效果，符合你的预期。

内容的提问来源于stack exchange，提问作者4zac