Using jQuery's function that contains css

Question

I'm super new to coding and I was trying to make a simple color game using jQuery. To put it short, 4 options, click the right one, an alert pops out. I randomly put the answer in an array ( colors[] ) along with other dummies, and then use that array to put into css.

  var dummy = '#aaa';
  var answer = '#ee00aa';

  var colors = [dummy,answer,dummy,dummy];

  for (var i = 1; i <= 4; i++) {
    $('#colorBox'+i).css('background', ''+colors[i-1]+'');
  }

  $('#colorBox'+i).click(function() {
    if ($(this).css('background', ''+colors[answer]+'') == true) {
      alert("Gratz!");
    }

The problem is, I cant find a way to define the answer for this click function to work. Thanks.

$(this).css('background', ''+colors[answer]+'') You are setting the background color, not getting its value. — Ivanka Todorova
– Ivanka Todorova, Commented Oct 19, 2016 at 9:59
Do you know any way to getting its value @IvankaTodorova ? Or maybe a link to somewhere I could read about this section? — Salam.MSaif
– Salam.MSaif, Commented Oct 19, 2016 at 10:06
Aside from the syntax and logic issues, I'd suggest you apply classes to the colourBox elements as checking for the background colour CSS property is inconsistent. Some browsers return RGB, some hex, for example. — Rory McCrossan
– Rory McCrossan, Commented Oct 19, 2016 at 10:09

Rory McCrossan · Accepted Answer · 2016-10-19 10:33:22Z

1

There are several issue with your code above.

Use the getter of css() in the condition and compare it directly to the answer string, as colors[answer] is invalid.
You don't need to repeatedly append empty strings.
You should put the click handler code inside the loop, as it relies on the i variable

There is one final, much larger, problem with this logic though. That is that when retrieving colours from CSS properties some browsers return hex values and others RGB. Therefore your comparison to a hex value will easily be broken.

A better solution would be to apply classes to elements to make it easier to determine which is the correct answer. You can also use classes to group common elements with a single instead of incremental id attributes. You can also use the initial loop to build the HTML. Something like this:

var classes = ['d', 'a', 'd', 'd'];
var $container = $('.container');

var html = '';
for (var i = 0; i < classes.length; i++) {
	html += '<div class="colorbox ' + classes[i] + '"></div>';
}
$container.append(html).on('click', '.colorbox', function() {
    if ($(this).hasClass('a')) {
        alert("Gratz!");
    }
});

.colorbox {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}
.colorbox.a {
    background-color: #ee00aa;
}
.colorbox.d {
    background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

answered Oct 19, 2016 at 10:33

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Salam.MSaif Over a year ago

Ok now I get what you meant earlier. What if I want to write this code without using class as you suggested? Using class is a very good way of solving it but I would prefer not to because I want to make RGB a variable so that it would change everytime the right answer is clicked.

Salam.MSaif Over a year ago

var color = $(this).css('background');if ( color == ans )

Collectives™ on Stack Overflow

Using jQuery's function that contains css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related