javascript - addEventListener 和单击按钮上的 if 语句

Question

我是编码新手，在这里我尝试使用 addEventListener 和 if 语句在单击按钮时更改框的颜色，但我没有以正确的方式执行此操作，并且无法在网上找到正确的方法。

var box = document.getElementById("box");
var yes = document.getElementById("yes");
var no  = document.getElementById("no");
yes.addEventListener("click", function(){
    if (yes.clicked == true){
        box.style.backgroundColor = "red";        
    } if(no.clicked == true) {
        box.style.backgroundColor = "green";
    }
});

Answer 1

您仅将监听器应用于"is"按钮，因此您的监听器仅适用于您的"is"按钮:

//Listener attached only to yes
yes.addEventListener("click", function(){
    if (yes.clicked == true){
        box.style.backgroundColor = "red";        
    } if(no.clicked == true) {
        box.style.backgroundColor = "green";
    }
});

因此，您不需要 if 语句来实现您的目的，您只需要各种监听器:

box.addEventListener("click", function(){
     alert("box clicked!");
});

yes.addEventListener("click", function(){
     box.style.backgroundColor = "red";
)};

no.addEventListener("click", function(){
     box.style.backgroundColor = "green";
});

如果您的按钮位于框内，您可以执行此操作而不是上面的功能:

box.addEventListener("click", function(ev){

    if(ev.currentTarget.id == "yes"){
        box.style.backgroundColor = "red";
    }else if(ev.currentTarget.id == "no"){
        box.style.backgroundColor = "green";
    }

});