check if 3 divs with different ids have the same background color

Question

I've had a similar issue previously where I wanted to check if the background color is white and I've followed that solution which worked so I tried to do the same to check if 3 divs with different id's have the same background color but it only works with one of them, as soon as I add the other two ids it stops working

var counter=0;                   
 $(".circles").click(function() {
    counter++;
    if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) {
        $(this).css("background-color", "black");
        $(".p1").css("font-weight", "bold");
        $(".p2").css("font-weight", "normal");
        var blackColor = $(this).css({
            backgroundColor: 'black'
        }).css('backgroundColor');


    } else if (counter % 2 === 1 && $(this).css("background-color") == whiteColor) {
        $(this).css("background-color", "red");
        $(".p2").css("font-weight", "bold");
        $(".p1").css("font-weight", "normal");
        var redColor = $(this).css({
            backgroundColor: 'red'
        }).css('backgroundColor');

    }


if ($("#one").css("background-color") == blackColor && $("#two").css("background-color") == blackColor && $("#three").css("background-color") == blackColor) {
$(".circles").hide();
};

})

HTML

    <div id="line1">
        <div class="circles" id="one">
        </div>
        <div class="circles" id="two">
        </div>
        <div class="circles" id="three">
        </div>
    </div>
    <div id="line2">
        <div class="circles" id="four">
        </div>
        <div class="circles" id="five">
        </div>
        <div class="circles" id="six">
        </div>
    </div>
    <div id="line3">
        <div class="circles" id="seven">
        </div>
        <div class="circles" id="eight">
        </div>
        <div class="circles" id="nine">
        </div>
    </div>

any idea how to fix this without redoing the whole code and use toggleclasses which would be the other alternative.

the previous thread I used as guide http://stackoverflow.com/questions/36535510/check-background-color-in-if-statement — Naomi, Apr 12 '16 at 17:06
counter is defined outside .click. It is set var counter = 0 — Naomi, Apr 12 '16 at 17:07
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Dave, Apr 12 '16 at 17:14

score 2 · Accepted Answer · answered Apr 12 '16 at 17:18

the scope of variable blackColor is limited to within if condition, place blackColor outside the if condition or make it globle

     var counter=0;  

             $(".circles").click(function() {
  var blackColor=''; 
        var redColor='';  
                counter++;
                if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) {
                    $(this).css("background-color", "black");
                    $(".p1").css("font-weight", "bold");
                    $(".p2").css("font-weight", "normal");
                    blackColor = $(this).css({
                        backgroundColor: 'black'
                    }).css('backgroundColor');


                } else if (counter % 2 === 1 && $(this).css("background-color") == whiteColor) {
                    $(this).css("background-color", "red");
                    $(".p2").css("font-weight", "bold");
                    $(".p1").css("font-weight", "normal");
                    redColor = $(this).css({
                        backgroundColor: 'red'
                    }).css('backgroundColor');

                }


            if ($("#one").css("background-color") == blackColor && $("#two").css("background-color") == blackColor && $("#three").css("background-color") == blackColor) {
            $(".circles").hide();
            };

            })

Well I tried that too but it's still not working. So there must be some kind of other issue. I think the issue might have something to do with that I'm using (this).css. — Naomi, Apr 12 '16 at 17:42
please share your HTML code as well to get more accurate answer — Satish Kumar sonker, Apr 12 '16 at 17:45
added the html. The issue is that I only want blackColor and redColor to change on the div that I'm clicking. If I set it to ("#one").css it works but it doesn't work with (this).css — Naomi, Apr 12 '16 at 20:48

check if 3 divs with different ids have the same background color

1 Answers1