CODEWITHSUNDEEP
javascriptjquerycss
Charlie McShane
Charlie McShane

Reputation: 317

Change background colour based on value output

I have a lottery number generator that allows you to generate 6 random numbers between 1 and 49.

How can I change the background colour of a div depending on it's containing <p> tag value/number when it has been generated?

I have attached my code so far of the lottery generator. I just need the red background colour to change depending on the number result, like so:

CodePen Example

Here is my JavaScript so far for the number generation:-

$("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));
});

Upvotes: 1

Views: 5202

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To do what you require you can first apply the same class to all the .resultN elements. This will DRY up your code by allowing you to use a single call to html() to affect all the elements.

You can then set their random value, and also use a switch statement to change their background colour based on that value. Try this:

$("#buttonGen").click(function() {
  $(".circle .result").text(function() {
    var value = parseInt(Math.floor(Math.random() * 49) + 1), bgColour;
    switch (true) {
      case (value < 10): bgColour = 'white'; break;
      case (value < 20): bgColour = 'blue'; break;
      case (value < 30): bgColour = 'pink'; break;
      case (value < 40): bgColour = 'green'; break;
      case (value < 50): bgColour = 'yellow'; break;
    }   
    $(this).closest('.circle').css('background-color', bgColour);
    return value;
  });
});
.__hero-container .title {
  margin-bottom: 30px;
}

.__hero-container .numbers .circle {
  background-color: red;
  border-radius: 50px;
  height: 90px;
}

.__hero-container .numbers .circle p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.__hero-container .button {
  margin-top: 30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="__hero-container">

  <div class="container title">
    <div class="col-md-12 text-center">
      <h1>Lottery Generator</h1>
    </div>
  </div>

  <div class="container text-center numbers">
    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>
  </div>

  <div class="container button">
    <div class="col-md-12 text-center">
      <button id="buttonGen">Generate</button>
    </div>
  </div>

</div>

Upvotes: 3

Mike
Mike

Reputation: 1492

I'd probably have a function after the setting of the html that will determine the color based on it.

$("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));
  determineColor();
});

function determineColor(){
 $(".circle").each(function(index, value){
    var color = getColorValue(value);
    $(this).css("background-color", color) 
 }
}

function getColorValue(value){
  if(value > 1 && value < 9){
    return "white";
  }
  // add others
}

Upvotes: 1

Super User
Super User

Reputation: 9642

You can use .each() for this. check updated snippet below..

$("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));

    $('.circle').each(function(){
         var numResult = parseInt($(this).find('p').html());
         if(numResult >=1 && numResult <=9) {
             $(this).css('background','white');
         } else if (numResult >=10 && numResult <=19) {
             $(this).css('background','blue');
         } else if (numResult >=20 && numResult <=29) {
             $(this).css('background','pink');
         } else if (numResult >=30 && numResult <=39) {
             $(this).css('background','green');
         } else if (numResult >=40 && numResult <=49) {
             $(this).css('background','yellow');
         }
         
         
    })

})
.__hero-container .title {
  margin-bottom: 30px;
}

.__hero-container .numbers .circle {
  background-color: red;
  border-radius: 50px;
  height: 90px;
  border: 1px solid #000; 
}

.__hero-container .numbers .circle p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.__hero-container .button {
  margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="__hero-container">

  <div class="container title">
    <div class="col-md-12 text-center">
      <h1>Lottery Generator</h1>
    </div>
  </div>
  
  <div class="container text-center numbers">
    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result1">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result2">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result3">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result4">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result5">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result6">0</p>
      </div>
    </div>
  </div>
  
  <div class="container button">
    <div class="col-md-12 text-center">
      <button id="buttonGen">Generate</button>
    </div>
  </div>
  
</div>

Upvotes: 1

Mathiasfc
Mathiasfc

Reputation: 1697

This will help you, just add the other validations...

$("#buttonGen").click(function() {
  $(".result1").html((Math.floor(Math.random() * 49) + 1));
  $(".result2").html((Math.floor(Math.random() * 49) + 1));
  $(".result3").html((Math.floor(Math.random() * 49) + 1));
  verifyContent();
});

function verifyContent() {
  $('.circle').each(function(i, obj) {
    var content = $(this).html();
    //console.log(content);
    if (content > 10 && content < 19) {
      $(this).css("background", "blue");
    } else {
      $(this).css("background", "white");
    }
  });
}
.circle {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonGen">Generate</button><br><br>
<div class="circle result1"></div>
<div class="circle result2"></div>
<div class="circle result3"></div>

Upvotes: 1

Chiller
Chiller

Reputation: 9738

Just add a loop for all the elements checking the content and then add a the specific background 

$( ".circle p" ).each(function(index) {
    if ($(this).html()>0 && $(this).html()<10){
      $(this).parent().css("background","black");
    }else if ($(this).html()>9 && $(this).html()<20){
      $(this).parent().css("background","blue");
    }
    //continue the rest for Ping, Green and Yellow
  });

Upvotes: 1

Related Questions