Переключить цвет фона на тот же div

Question

Я пытаюсь переключить цвет фона того же самого div.Он меняется один раз (с синего на красный), как и ожидалось.Но он не может переключиться обратно на красный и продолжать переключаться между двумя цветами.Я знаю, что должен использовать «==» в первом операторе if, но при использовании «==» даже первый переключатель не работает.

Какие-нибудь предложения, как заставить тумблер работать повторно?

function toggleFunction() {
  var x = document.getElementById("box");
  
  if (x.style.background == "blue") {
    x.style.background = "red";
  } else {
    x.style.background = "blue";
 }
}

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box" class="box" onclick="toggleFunction()"></div>

Answer 1

$( ".box" ).each(function() {
  $( this).click(function() {
    $( this ).toggleClass( "red" );
  });
});

.box {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}
.box.red {
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box" class="box"></div>

<div id="box" class="box"></div>

Answer 2

Самое простое решение - создать новый класс с именем red и переключить его с помощью classList.toggle.Основным преимуществом этого подхода будет то, что вы можете переключать больше CSS свойств, если вы используете класс для переключения, и это также вычтет сравнение if-else для вас.

function toggleFunction() {
  var x = document.getElementById("box");
  x.classList.toggle("red");
}

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}
.red{
 background-color: red;
}

<div id="box" class="box" onclick="toggleFunction()"></div>