Toggle background color of same div

Question

I am trying to toggle the background color of same div. It does changes once (from blue to red) as expected. But it is not able to toggle back to red and continue toggling between the 2 colors. I know I should use "==" in the first if-statement but when using "==" not even the first toggle works.

Any suggestions how to get the toggle to work repetitive?

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>

Yes thanks, I accepted your, I think it is a good solution. (even though it did not really explain why my original code could not work.) — Toolbox, Apr 26 '18 at 11:10
You are using `=` in the comparison and not `==` that is why your code was not working. — Ankit Agarwal, Apr 26 '18 at 11:20
check the edited snippet in this question. I have just replaced `==` and it is working. — Ankit Agarwal, Apr 26 '18 at 11:23

score 2 · Accepted Answer · answered Apr 26 '18 at 08:02

The simplest solution would to create a new class called red and toggle that using classList.toggle. The main advantage of this approach would be that you can toggle more CSS properties, if you use a class for toggling and this will also deduct the if-else comparison for you.

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>

@Hey24sheep appreciate that. Thanks – Ankit Agarwal Apr 26 '18 at 08:05 — Ankit Agarwal, Apr 26 '18 at 08:05

score 0 · Answer 2 · answered Apr 26 '18 at 08:20

$( ".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>

Toggle background color of same div

2 Answers2