JS переключение между двумя цветами ж / если еще - PullRequest
Новая
       10

JS переключение между двумя цветами ж / если еще

1 голос
/ 29 февраля 2020

Я работаю над своим портфелем, и мне нужно переключиться между состояниями элементов элемента. В настоящее время я пытаюсь заставить его работать на следующем примере. В этом конкретном случае моя цель - нажать кнопку и переключаться между зеленым и красным фоном при каждом нажатии. Но что-то не сработает. Я могу переключиться с зеленого на красный, но не с красного на зеленый. Чего мне не хватает? 

<button id="button">Toggle</button>
<div class="test" id="test"></div>


.test {
  width: 100px;
  height: 100px;
  background: green;
  margin-top: 20px;
}


var btn = document.getElementById("button");
var test = document.getElementById("test");

btn.onclick = function() {
  if (test.style.background = "green") {test.style.background = "red";} else {test.style.background = "green";}};

Codepen Demo https://codepen.io/yanniksturm/pen/rNVmqJe

Большое спасибо!

1 Ответ

0 голосов
/ 29 февраля 2020

В том случае, если в условии должен быть двойной (==) знак равенства, а также проверка по backgroundColor вместо background, поскольку в некоторых браузерах больше свойств с background, например background: green none repeat scroll 0% 0%;, поэтому условие не будет выполнено.
Я рекомендую использовать backgroundColor вместо background. 

var btn = document.getElementById("button");
var test = document.getElementById("test");

btn.onclick = function() {
  if (test.style.backgroundColor == "red") {
    test.style.backgroundColor = "green";} 
  else {
    test.style.backgroundColor = "red";
  }
}
.test {
  width: 100px;
  height: 100px;
  background: green;
  margin-top: 20px;
}
<button id="button">Toggle</button>
<div class="test" id="test"></div>
...