2

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?

L777
  • 7,719
  • 3
  • 38
  • 63
Naomi
  • 1,280
  • 6
  • 21
  • 40
  • `$(this).css("background-color")` will probably be `rgb(255,255,255)`. Never trust colors. – Oriol Apr 10 '16 at 21:05
  • 1
    Further to Oriol's comment 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 Apr 10 '16 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 Apr 10 '16 at 21:31

2 Answers2

2

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
}
fredmaggiowski
  • 2,232
  • 3
  • 25
  • 44
  • the problem isn't the counter. The counter is working the way it should. I don't want to be able to alter the background-color. I want it to only switch once. That's the issue. – Naomi Apr 10 '16 at 21:28
  • the problem is how you're handling the color matching inside the `IF` condition and the color switch via jQuery, you should definitely use classes instead of `$(this).css(..) == "a color string"`. For instance you can create a `.white` class which your item as 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) – fredmaggiowski Apr 10 '16 at 21:32
  • 1
    ah, now I get what you mean. Yeah that sounds like a good way to do it. Gonna try that. Thanks – Naomi Apr 10 '16 at 21:35
  • you're welcome :) If the solution worked please accept the answer for future readers – fredmaggiowski Apr 10 '16 at 21:36
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.com/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.

Community
  • 1
  • 1
skobaljic
  • 9,379
  • 1
  • 25
  • 51
  • Why would you create a stub element to retrieve its color when needed rather than using classes? – fredmaggiowski Apr 10 '16 at 21:43
  • I would not do it that way, I am just following the question so my answer has sense. Theoretically, programmer may not be allowed to change the styles, or those would need approval from higher instance. – skobaljic Apr 10 '16 at 21:46
  • Thanks, this was the easier way for me to do it since it didn't mean for me to redo my code and I understood each step. – Naomi Apr 10 '16 at 21:51
  • I wasn't saying it doesn't had sense.. Just not getting the point of the workaround.. I was just: "Why?!" Now I got your point :) I'd rather crash everyone for an approval rather than using workarounds, though :) – fredmaggiowski Apr 10 '16 at 21:51