I have an if statement with 2 conditions. For some reason it changes the background color to red and never to black.

$(".circles").click(function() {
    counter++;
    if (counter % 2 === 0 && $(this).css("background-color")=="#FFFFFF") {
        $(this).css("background-color", "black");
    } else {
        $(this).css("background-color", "red");
    }
})

The .circles is set to #FFFFFF originally. What is wrong?

I have an if statement with 2 conditions. For some reason it changes the background color to red and never to black.

$(".circles").click(function() {
    counter++;
    if (counter % 2 === 0 && $(this).css("background-color")=="#FFFFFF") {
        $(this).css("background-color", "black");
    } else {
        $(this).css("background-color", "red");
    }
})

The .circles is set to #FFFFFF originally. What is wrong?

• javascript
• jquery
• html
• css

• $(this).css("background-color") will probably be rgb(255,255,255). Never trust colors. – Oriol Commented Apr 10, 2016 at 21:05
• 1 Further to Oriol's ment instead of testing the colour value (which is difficult, at best, to do reliably), assign the given background-colors to CSS classes and use toggleClass() to switch classes from one to the other. – David Thomas Commented Apr 10, 2016 at 21:14
• What is your initial value for variable counter? What is the order you want to get: white, black, red, red, red OR white, black, red, black, red OR something else? – skobaljic Commented Apr 10, 2016 at 21:31

2 Answers 2

The browser will probably give you back the rgb color if you use css("background-color") method, but that is not for sure. If you want to be sure, than create an element with white background and get its property:

var whiteColor = $('<div/>').css({
    backgroundColor: '#fff'
}).css('backgroundColor');
var counter = 0;
$(".circles").click(function() {
    counter++;
    if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) {
        $(this).css("background-color", "black");
    } else {
        $(this).css("background-color", "red");
    }
})

.circles {
    background-color: #FFFFFF;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles" style="background-color: #fff;">
    Click me
</div>

Credits to this answer.

Also on this Fiddle.

I tried to log the actual result of the call:

$(this).css("background-color")

The result (on Chrome) was: rgb(255,255,255) hence it is different from the string "#FFFFFF".

Also the problem with the counter is that when it's an odd number you set the background-color to red, when it's an even number the background-color is red [returning rgb(255,0,0)] and thus it's different from "#FFFFFF".

Here's a Fiddle.

I'd suggest you using a different kind of match.. for instance you could toggle classes on click and use the added classes selector to alter the background-color

Using classes instead of $(this).css(..) == "a color string" inside the IF condition means that you can create a .white class which your item has at the start. When clicked, if it has .white class than you change its color using another class .red (class names are examples, just name them as you wish)

The classes are set to only change the background-color in your CSS file, hence they'll be something like:

.white{
    background-color: #FFFFFF
}

.red{
    background-color: #FF0000
}