尝试使用HTML、CSS和JS制作灯泡
尝试使用HTML、CSS和JS制作灯泡
提问于 2021-05-10 13:51:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Circle</title>
<style>
body {background: black;}
.container {display: flex;}
.circle {
width: 500px;
height: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
background: white;
}
.active {
background: yellow !important;
color: red;
}
</style>
</head>
<body>
<section class="container">
<button class="circle circle1">Circle1</button>
<button class="circle circle2">Circle2</button>
<button class="circle circle3">Circle3</button>
</section>
<script>
let cir1 = document.querySelector('.circle1')
let cir2 = document.querySelector('.circle2')
let cir3 = document.querySelector('.circle3')
let allCircle = document.querySelectorAll('.circle');
cir1.addEventListener('onClick', onButton1Click);
cir2.addEventListener('onClick', onButton2Click);
cir3.addEventListener('onClick', onButton3Click);
function onButton1Click() {
if (cir1.classList.contains("active")) {
allCircle.classList.remove('active');
} else {
allCircle.classList.remove('active');
cir1.classList.add('active');
}
}
function onButton2Click() {
if (cir2.classList.contains("active")) {
allCircle.classList.remove('active');
} else {
allCircle.classList.remove('active');
cir2.classList.add('active');
}
}
function onButton3Click() {
if (cir3.classList.contains("active")) {
allCircle.classList.remove('active');
} else {
allCircle.classList.remove('active');
cir3.classList.add('active');
}
}
</script>
</body>
</html>
我试图使3个灯泡由圆圈代表使用HTML和CSS。因此，如果我使用按钮打开一个灯泡，其他灯泡应该使用addeventlistener关闭。我找不到让灯泡变黄的方法。我有什么地方做错了吗？我找了找打字错误，但什么也找不到。
回答 5
Stack Overflow用户
发布于 2021-05-10 14:02:49
这里需要更改一些小的东西。
- 要传递给addEventListener的事件类型是'click‘而不是’onClick‘。
- 变量
allCircle返回dom节点的列表，而不是单个dom节点。所以它本质上是一个[]。因此，dom节点上可用的属性和方法在变量上是不可访问的。您可以做的是编写一个循环来访问数组的每个元素，然后逐个修改它们的类
我可能还建议您将debugger放入代码中，以逐行查看发生了什么。This article by Google should help you on using the Chrome dev tools.
这是我对Stack Overflow的第一个回答。
let cir1 = document.querySelector('.circle1')
let cir2 = document.querySelector('.circle2')
let cir3 = document.querySelector('.circle3')
cir1.addEventListener('click', onButton1Click);
cir2.addEventListener('click', onButton2Click);
cir3.addEventListener('click', onButton3Click);
function removeActive() {
cir1.classList.remove('active');
cir2.classList.remove('active');
cir3.classList.remove('active');
}
function onButton1Click() {
removeActive();
cir1.classList.add('active');
}
function onButton2Click() {
removeActive();
cir2.classList.add('active');
}
function onButton3Click() {
removeActive();
cir3.classList.add('active');
}body {
background: black;
}
.container {
display: flex;
align-items: flex-start;
}
.circle {
width: 100px;
height: 100px;
max-height: 100px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
background: white;
}
.active {
background: yellow !important;
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Circle</title>
</head>
<body>
<section class="container">
<button class="circle circle1">Circle1</button>
<button class="circle circle2">Circle2</button>
<button class="circle circle3">Circle3</button>
</section>
</body>
</html>
Stack Overflow用户
发布于 2021-05-10 14:02:13
这里似乎有两个问题。
- 为单击事件添加事件侦听器时，必须使用要作为第一个参数传递给侦听器的
click进行调用，但您添加的click返回了一个HTMLCollection。所以classList将不是它的有效属性。您可能希望遍历allCircles中的元素以删除该类。
我已经修改了侦听器，并更正了https://jsfiddle.net/gr33nw1zard/y7f5wnda/中第一个按钮的分类相关修复
Stack Overflow用户
发布于 2021-05-10 14:08:56
应该是单击事件，而不是'onClick‘。
cir1.addEventListener('click'，onButton1Click)；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67465355
复制相关文章
相似问题
腾讯云开发者
