Блог

Главная - Вопросы по программированию - Измените цвет текущего элемента и удалите фон из предыдущего клика

Измените цвет текущего элемента и удалите фон из предыдущего клика

#javascript

#javascript

Вопрос:

Итак, у меня есть список элементов, которые изначально имеют белый фон, и моя цель — когда я нажимаю на один из них, он меняет цвет на синий, но только один элемент может быть выбран и иметь цвет — если ранее был нажат другой элемент, фон возвращается к белому

Я пытался использовать этот код, но он не работает

 var prevDiv=null
        function change_color_to_blue_click(){ 
            if(prevDiv) {
                prevDiv.style.backgroundColor = "white";        
            }
            var target = event.currentTarget
            target.style.backgroundColor="blue" 
            selected = true                               
            prevDiv = target;
        }

Комментарии:

1. Вы должны вставить немного больше кода, чтобы люди могли точно отлаживать, или вам нужно отправить минимальный рабочий пример

Ответ №1:

Единственное, о чем я могу думать, это то, что вы не передали событие в функцию.

Комментарии:

1. Я принимаю это как метод addEventListener или onlick, но они оба не работают.

Ответ №2:

Была ли причина, по которой вы не приняли аргумент события в своей функции? (Возможно, потому, что Internet Explorer использовал глобальный объект события.)

Это сработало для меня:

 function change_color_to_blue_click(event){
    if(prevDiv) {
        prevDiv.style.backgroundColor = "white";        
    }
    var target = event.currentTarget
    target.style.backgroundColor="blue" 
    selected = true
    prevDiv = target;
}

Комментарии:

1. Я принимаю это как метод addEventListener или onlick, но они оба не работают.

Ответ №3:

 var prevDiv=null
function changeColor(){ 
  if(prevDiv) {
    prevDiv.style.backgroundColor = "white";        
  }
  var target = event.currentTarget
  target.style.backgroundColor="blue" 
  selected = true                               
  prevDiv = target;
}  
 .box {
  width: 50px;
  height: 50px;
  border: solid black 2px;
  margin: 20px;
  display: inline-block;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="click">
        <div onclick="changeColor()" class="box"></div>
        <div onclick="changeColor()" class="box"></div>
        <div onclick="changeColor()" class="box"></div>
        <div onclick="changeColor()" class="box"></div>
    </div>
</body>
</html>

Комментарии:

1. Когда я принимаю его как метод addEventListener или onlick, но они оба не работают.

Ответ №4:

 var prevDiv = null;
function changeColor() {
  var target = event.currentTarget;
  if (prevDiv) {
    prevDiv.style.backgroundColor = "white";
    target.style.backgroundColor = "blue";
    prevDiv = target;
  } else {
    target.style.backgroundColor = "blue";
    prevDiv = target;
  }
}