Javascript 通过按钮列表添加和删除类

我有一个按钮列表

我需要向它们中的每一个添加clickEvent，单击时需要检查是否有另一个带有类的按钮（btnActive），删除它并将类添加到单击的按钮中

document.queryselectoral（'.btn'）.forEach（函数（el）{
el.addEventListener（'click'，函数（e）{
设i=0；
对于（i=0；i

0
1.
2.
3.
您有两个问题：


您在
循环的
中引用了
btnAll.length
，但未定义
btnAll
。您需要定义它并为其指定按钮数组

实际上，您并没有在
if
语句中操作HTML按钮。相反，您正在尝试使用
i
（索引），这是一个数字。要引用实际的HTML按钮，您需要执行
btnAll[i]


也就是说，您的实际问题可能不是读取控制台中抛出的错误


const btnAll=document.queryselectoral（'.btn'））
B所有前端（功能（el）{
el.addEventListener（'click'，函数（e）{
设i=0；
对于（i=0；i
.btnActive{
颜色：红色；
}

0
1.
2.
3.
您的代码包含大量语法错误：

未定义btnAll
您试图通过
i
直接访问dom元素。改用
b所有[i]

document.queryselectoral（'.btn'）.forEach（函数（el）{
el.addEventListener（'click'，函数（e）{
var btnAll=document.querySelectorAll（'.btn'）；
设i=0；
对于（i=0；i
.btn.btnActive
{
字号：900；
颜色：红色；
}

0
1.
2.
3.
使
.btnActive
类在启用
.btn
的同一个div上工作。然后在将类添加到单击的元素之前，只需循环通过
btnAll
els即可删除该类：


让btnAll=document.queryselectoral（'.btn'）；
document.querySelectorAll（'.btn'）.forEach（函数（el1）{
el1.addEventListener（'click'，函数（e）{
B所有前端（功能（el2）{
el2.classList.remove（'btnActive'）；
});
el1.classList.add（'btnActive'）；
});
});
.btn{
填充：10px 20px；
背景：浅蓝色；
文本对齐：居中；
显示：内联块；
}
.btn.btnActive{
背景：橙色；
颜色：白色；
}

0
1.
2.
3.
由于其他答案已经说明了代码不起作用的原因，下面是一个示例，您可以将一个事件侦听器连接到容器，并捕获从其他元素冒出的事件（请参见：）。它有助于编写更实用的代码


//获取容器和按钮
const container=document.querySelector（'.btnContainer'）；
const buttons=document.queryselectoral（'.btn'）；
//将单击侦听器添加到容器
container.addEventListener（'click'，handleClick，false）；
函数handleClick（e）{
常数{target}=e；
//如果已单击某个按钮
if（target.classList.contains（'btn'））{
//清除所有活动按钮
button.forEach（button=>button.classList.remove（'btnActive'）；
//使单击的按钮处于活动状态
target.classList.add（'btnActive'）；
}
}
.btnActive{
背景色：红色；
}

0
1.
2.
3.
bNALL从未定义。很抱歉，我只是为了更清楚而进行了编辑。谢谢，我还没有定义。查看我的答案。@MatMol请不要在发布问题后修改问题代码。人们的答案将不再有意义。