如何将if语句与onclick一起使用来警告多个div

Question

如果点击了正确的圆圈，我将尝试显示onclick警报，如果点击了错误的圆圈，则我希望更改圆圈的颜色。。。对不起，我是编程新手，我真的希望这里有人能帮助我，谢谢你的帮助。

第页。S"；否则"；条件正在起作用，而不是"；如果"；

代码如下：

<script type="text/javascript">
document.getElementById("redCircle").onclick = function() {
var circleClicked = document.getElementById("redCircle").onclick;
if(circleClicked == redCircle) {
document.getElementById("redCircle").style.background = "red";
alert("You got it right");
} else {
alert("Sorry, try again");
}
}
</script>

Answer 1

代码不起作用的两个原因：

if条件中的

1. redCircle未声明为变量。Javascript不知道redCircle是什么。

2. 不能用事件侦听器声明变量circleClicked。将事件侦听器附加到变量。

这就是你要找的吗？我发布的是onclick和addEventListener。但我建议你使用后者。

const circles = document.querySelectorAll('.circles');
circles.forEach(el => {
el.onclick = function(e) {
if(e.target.id === 'correctCircle'){
e.target.style.background = 'red';
alert("You got it right");
}else{
alert("Sorry, try again");
}
};
});

.circles {
width:50px; 
height:50px;
margin-bottom:10px;
background-color: green; 
border-radius: 50%;
}

<div class="circles" id="correctCircle"></div>
<div class="circles"></div>

使用addEventListener:

const circles = document.querySelectorAll('.circles');
circles.forEach(el => {
el.addEventListener('click', (e) => {
if(e.target.id === 'correctCircle'){
e.target.style.background = 'red';
alert("You got it right");
}else{
alert("Sorry, try again");
}
});
});

.circles {
width:50px; 
height:50px;
margin-bottom:10px;
background-color: green; 
border-radius: 50%;
}

<div class="circles" id="correctCircle"></div>
<div class="circles"></div>

所以基本上，我在这里所做的是声明一个名为circles的变量，然后循环遍历它们中的每一个，以检查它们中是否有一个id为correctCircle。

Event Listeners有一个参数，我们称之为e，它包含事件所附加的所有信息。e.target会给你刚刚点击的div。例如，如果你点击了第一个圆圈，那么e.target只会给你那个圆圈的div。因此，如果该div的id为correctCircle，那么它会更改背景颜色并提醒您。

希望能有所帮助。