Jquery – Change span text color based on numeric value

Issue

I’m trying to build a review system in WP with Advanced Custom Fields, but I can’t solve this. I want to change the color of a score based on the number.
For example: if the writer puts 0-40 as score it has to be changed to red; if the writer puts 40-60 it has to be changed to orange; if the writter puts 60-80 it has to be green…

HTML:

<div class="r-summary">
   <span id="score">
      <?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE
   </span>
 </div>

Solution

Fiddle: http://jsfiddle.net/5zdemo3j/

(change the score in the HTML section and “Run” to see changes)

$(function () {
    // Score Color
    var score = parseInt($('#score').text().trim());
    var color = 'red';
    if (!isNaN(score)) {
        if (score >= 40) {
            color = 'orange';
        }
        if (score >= 60) {
            color = 'green';
        }
        $('#score').css('color', color);
    }
});

Answered By – Bitwise Creative

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.