Javascript 尝试使用HTML&；制作灯泡；CSS&；JS

3圈
正文{背景：黑色；}
.container{display:flex；}
.圆圈{
宽度：500px；
高度：500px；
-webkit边界半径：250px；
-moz边界半径：250px；
边界半径：250px；
背景：白色；
}
.主动{
背景：黄色！重要；
颜色：红色；
}
圆圈1
圆圈2
圆圈3
设cir1=document.querySelector（'.circle1'）
设cir2=document.querySelector（'.circle2'）
设cir3=document.querySelector（'.circle3'）
让allCircle=document.queryselectoral（'.circle'）；
cir1.addEventListener（“onClick”，onButton1Click）；
cir2.addEventListener（'onClick'，onButton2Click）；
cir3.addEventListener（'onClick'，onButton3Click）；
函数onButton1Click（）{
if（cir1.classList.contains（“活动”））{
allCircle.classList.remove（'active'）；
}否则{
allCircle.classList.remove（'active'）；
cir1.classList.add（'active'）；
}
}
函数onButton2Click（）{
if（cir2.classList.contains（“活动”））{
allCircle.classList.remove（'active'）；
}否则{
allCircle.classList.remove（'active'）；
cir2.classList.add（'active'）；
}
}
函数onButton3Click（）{
if（cir3.classList.contains（“活动”））{
allCircle.classList.remove（'active'）；
}否则{
allCircle.classList.remove（'active'）；
cir3.classList.add（'active'）；
}
}

这里似乎有两个问题

为单击事件添加事件侦听器时，必须使用

click

调用它，该函数将作为第一个参数传递给侦听器，但您已经添加了

onClick

querySelectorAll

返回一个

HTMLCollection

。因此，

classList

将不是它的有效属性。您可能希望循环遍历

allCircles

中的元素以删除该类

---

我已经修改了监听器并更正了与classist相关的第一个按钮的修复，这里似乎有两个问题

为单击事件添加事件侦听器时，必须使用

click

调用它，该函数将作为第一个参数传递给侦听器，但您已经添加了

onClick

querySelectorAll

返回一个

HTMLCollection

。因此，

classList

将不是它的有效属性。您可能希望循环遍历

allCircles

中的元素以删除该类

---

我已经修改了监听器，并更正了与classist相关的第一个按钮的修复，这里有一些小事情需要更改

要传递给addEventListener的事件类型是“单击”，而不是“onClick”

变量

allCircle

返回dom节点列表，而不是单个dom节点。所以它本质上是一个[]。因此，无法在变量上访问dom节点上可用的属性和方法。您可以编写一个循环来访问数组的每个元素，然后逐个修改它们的类

还可能建议您将

调试器
放入代码中，逐行查看正在发生的事情

这是我关于堆栈溢出的第一个答案


let cir1=document.querySelector（'.circle1'）
设cir2=document.querySelector（'.circle2'）
设cir3=document.querySelector（'.circle3'）
cir1.addEventListener（'click'，onButton1Click）；
cir2.addEventListener（'click'，onButton2Click）；
cir3.addEventListener（“单击”，按钮3单击）；
函数removeActive（）{
cir1.classList.remove（'active'）；
cir2.classList.remove（'active'）；
cir3.classList.remove（'active'）；
}
函数onButton1Click（）{
removeActive（）；
cir1.classList.add（'active'）；
}
函数onButton2Click（）{
removeActive（）；
cir2.classList.add（'active'）；
}
函数onButton3Click（）{
removeActive（）；
cir3.classList.add（'active'）；
}
正文{
背景：黑色；
}
.集装箱{
显示器：flex；
调整项目：灵活启动；
}
.圆圈{
宽度：100px；
高度：100px；
最大高度：100px；
-webkit边界半径：250px；
-moz边界半径：250px；
边界半径：250px；
背景：白色；
}
.主动{
背景：黄色！重要；
颜色：红色；
}

3圈
圆圈1
圆圈2
圆圈3
这里需要更改一些小事情

要传递给addEventListener的事件类型是“单击”，而不是“onClick”


变量
allCircle
返回dom节点列表，而不是单个dom节点。所以它本质上是一个[]。因此，无法在变量上访问dom节点上可用的属性和方法。您可以编写一个循环来访问数组的每个元素，然后逐个修改它们的类


还可能建议您将
调试器
放入代码中，逐行查看正在发生的事情

这是我关于堆栈溢出的第一个答案


let cir1=document.querySelector（'.circle1'）
设cir2=document.querySelector（'.circle2'）
设cir3=document.querySelector（'.circle3'）
cir1.addEventListener（'click'，onButton1Click）；
cir2.addEventListener（'click'，onButton2Click）；
cir3.addEventListener（“单击”，按钮3单击）；
函数removeActive（）{
cir1.classList.remove（'active'）；
cir2.classList.remove（'active'）；
cir3.classList.remove（'active'）；
}
函数onButton1Click（）{
removeActive（）；
cir1.classList.add（'active'）；
}
函数onButton2Click（）{
removeActive（）；
cir2.classList.add（'active'）；
}
函数onButton3Click（）{
removeActive（）；
cir3.classList.add（'active'）；
}
正文{
背景：黑色；
}
.集装箱{
显示器：flex；
调整项目：灵活启动；
}
.圆圈{
宽度：100px；
高度：100px；
最大高度：100px