CODEWITHSUNDEEP
javascriptjquerycss
Tomasz Szymanek
Tomasz Szymanek

Reputation: 259

Matching proper colors of a div

I'm making a very simple minigame which idea is to pick the proper color of the figure you've seen for about a second or two by clicking one of the four divs with the id's circle1, circle2 etc. with the specific colors:

var odpowiedz_kolor = $('<div class="label id="gra">Jaki kolor miał następujący kształt?</br></br><ul class="inline">'+
                '<div class="odpowiedz_pojemnik" id="' + wylosowane[losowa_z_wylosowanych_figur].figura + '"> </div></br></br>'+
                '<ul class="inline">'+
                '<li><div class="kolo" id="kolo1"> </div></li>'+
                '<li><div class="kolo" id="kolo2"> </div></li>'+
                '<li><div class="kolo" id="kolo3"> </div></li>'+
                '<li><div class="kolo" id="kolo4"> </div></li>'+
            '</ul></div>');

I've cut out the unnecessary code...

$('#kolo1').css('background-color', wylosowane[0].kolor);
$('#kolo2').css('background-color', wylosowane[1].kolor);
$('#kolo3').css('background-color', wylosowane[2].kolor);
$('#kolo4').css('background-color', wylosowane[3].kolor);
$(".kolo").on('click', function(){
var color = $('.kolo').find('#kolo').css('background-color');

I've set the colors as seen above. Now's the question how to retrieve the according colors 'cause I'm stuck on the click handler. I'd appreciate even the ugly but working solutions.

The scenario is:

example

Thank you in advance.

Upvotes: 2

Views: 107

Answers (2)

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

You probably want to know the color of the figure that you just clicked, so I suggest you made this :

$(".kolo").on('click', function(){
    var color = $(this).css('background-color');
}

JsFiddle : http://jsfiddle.net/F3HB5/

EDIT :

Based on your code, I have updated your jsFiddle to this one : http://jsfiddle.net/8LFR7/3/.

There were 2 main errors :

  1. when you want to target an id, you have to put a # before the id -> $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color').
  2. As you remove your figure before the test, you have to capture the color BEFORE you remove it and save it in some variable : here I have put it at the beginning of the setTimeout block : var targetColor = $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color');

Upvotes: 1

Hmxa Mughal
Hmxa Mughal

Reputation: 394

Firstly a friendly advice, whichever native language you belong to, please use English for your code.

Now your solution: Well you need to match the background-color for the clicked circle with the triangle, so you can do the following to achieve this:

$(".kolo").on('click', function(event){
    var id = event.target.id; // For the id, but that does not matter, you can get it using the class also or this

    if($(id).css('background-color') == $('.odpowiedz_pojemnik').css('background-color')){
      alert('Good!');
    }
    else{
      alert('Bad!');
    }
}

Upvotes: 0

Related Questions