如何使用target方法修改点击时被选中按钮的颜色

你原有代码存在两个核心问题：

• 直接调用document.querySelectorAll(".btn").style会报错：querySelectorAll返回的是包含所有匹配元素的NodeList集合，不能直接给整个集合设置样式属性
• 没有接收点击事件的事件对象，无法定位到当前点击的对应按钮

修正后的完整代码 #

JavaScript 部分 #

// 先一次性获取所有按钮元素，避免重复查询DOM
const buttons = document.querySelectorAll(".btn");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function (e) {
    // e为点击事件对象，e.target就是触发本次点击的目标元素
    e.target.style.backgroundColor = "red";
  });
}

HTML 部分和你原有代码一致 #

<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>

可选优化方案 #

如果你需要实现「点击新按钮时，之前变红的按钮自动恢复默认颜色」的互斥选中效果，可以修改JS代码如下：

const buttons = document.querySelectorAll(".btn");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function (e) {
    // 先重置所有按钮的背景色为默认值
    buttons.forEach(btn => btn.style.backgroundColor = "");
    // 仅将当前点击的按钮设为红色
    e.target.style.backgroundColor = "red";
  });
}

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