addEventListener и если оператор на кнопку нажал - PullRequest
Новая
       10

addEventListener и если оператор на кнопку нажал

0 голосов
/ 01 марта 2020

Я новичок в кодировании, и здесь я пытаюсь использовать 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";
    }
});

Ответы [ 3 ]

1 голос
/ 01 марта 2020

Вы только назначаете слушателю кнопку «Да», поэтому ваш слушатель будет работать только для вашей кнопки «Да»: 

//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";
    }

});
0 голосов
/ 01 марта 2020 
function colorChange(e) {
    if(e.target.id == 'yes'){ // if user clicked the yes button
        box.style.backgroundColor = "red";

    }else if(e.target.id == 'no'){ // if user clicked the no button
        box.style.backgroundColor = "green";
    }
}
yes.addEventListener('click', colorChange);
no.addEventListener('click', colorChange);
0 голосов
/ 01 марта 2020

Когда вы добавляете прослушиватель событий к кнопке yes, он срабатывает только при нажатии кнопки «Да». Таким образом, вам нужно отдельное для обеих кнопок и нет, если оператор необходим. 

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