CODEWITHSUNDEEP
javascriptjquerycss
Smithy
Smithy

Reputation: 847

Change item color depending on the value range

I got this .item box which has some value in it, by default it has background of grey. What I would like to achieve is to add the corresponding class to it depending on the value inside its .item-value tag. I have created a function setItemColors but it seems I'm missing something and I'm not sure if this is a good way to achieve it… Any ideas what could be a better solution? Thanks for any advice!

function setItemColors() {
  // If 30 or under, set item class to item--blue
  if( $("#value").text() =< 30 ) {
      $(".item").addClass("item--blue");
    // If 31-79, set item class to item--yellow
  } else if ( $("#value").text() > 31 && <= 79 ) {
      $(".item").removeClass("item--blue");
      $(".item").addClass("item--red");
  }
  // If 80-100, set item class to item--red, if there is no value leave only .item class
  else if ( $("#value").text() > 80 && <= 100 ) {
      $(".item").removeClass("item--blue");
      $(".item").addClass("item--red");
  }
}

setItemColors();
.item {
  padding: 20px;
  width: 100px;
  height: 100px;
  background-color: grey;
}

.item--blue {
  background-color: blue;
}

.item--yellow {
  background-color: yellow;
}

.item--red {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <span class="item-value" id="value">20</span>
  <span>%<span>
  <p>lorem ipsum</p>
</div>

Upvotes: 0

Views: 336

Answers (2)

Rui Carvalho
Rui Carvalho

Reputation: 3476

Your problem is here:

if( $("#value").text() =< 30 ) {

and here:

} else if ( $("#value").text() > 31 && <= 79 ) {

and here:

else if ( $("#value").text() > 80 && <= 100 ) {

it should be:

if( $("#value").text() <= 30 ) {

and

} else if ( $("#value").text() > 31 && $("#value").text() <= 79 ) {

and

else if ( $("#value").text() > 80 && $("#value").text() <= 100 ) {

Also, don't forget to use parseInt() to convert the strings into ints for proper comparison on logic operations, as in:

if( parseInt($("#value").text()) <= 30 ) {

For robust code you should do some extra checks on the text values coming from the span. What you want to do if you get a NaN?

One last thing, your third if condition does not make much sense, since it keeps the red background - is that really what you want? (because if it is, then conditions 2 and 3 can be turn into single logic condition, right?)

Feel free to play with the fixed code here > https://jsfiddle.net/RuiCarvalho/dt3qrxpb/4/

Upvotes: 1

Sumit Patel
Sumit Patel

Reputation: 4638

There where multiple issue with your script which i have modified.

function setItemColors() {
  // If 30 or under, set item class to item--blue
  if( $("#value").text() <= 30 ) {
      $(".item").addClass("item--blue");
    // If 31-79, set item class to item--yellow
  } else if ( $("#value").text() > 31 && $("#value").text() <= 79 ) {
      $(".item").removeClass("item--blue");
      $(".item").addClass("item--red");
  }
  // If 80-100, set item class to item--red, if there is no value leave only .item class
  else if ( $("#value").text() > 80 && $("#value").text() <= 100 ) {
      $(".item").removeClass("item--blue");
      $(".item").addClass("item--red");
  }
}

setItemColors();
.item {
  padding: 20px;
  width: 100px;
  height: 100px;
  background-color: grey;
}

.item--blue {
  background-color: blue;
}

.item--yellow {
  background-color: yellow;
}

.item--red {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <span class="item-value" id="value">20</span>
  <span>%<span>
  <p>lorem ipsum</p>
</div>

Upvotes: 1

Related Questions