Jquery: random background color

Question

I have the following background colors: #05668D, #028090, #00A896, #02C39A, #F0F3BD ... When the page loads, how do I make each element with class abc have a different background color (may repeat, random), in one of the top colors.

Ex:

<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>

Result:

<div class="asd"><div class="abc" style="background-color:#05668D">...</div></div>
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div>
<div class="asd"><div class="abc" style="background-color:#028090">...</div></div>
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div>
<div class="asd"><div class="abc" style="background-color:#F0F3BD">...</div></div>
 ...

What have you tried so far? What you are asking is something too basic. If you know what CSS is, and you know *some* Javascript, you can do this in 1 minute. Also, http://stackoverflow.com/questions/18820733/getting-a-random-background-color-in-javascript and http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript explain most of it. Just a simple Google search for "javascript random background color". — Ismael Miguel, Oct 22 '16 at 18:30
You can see the answer [Random color in jQuery](http://stackoverflow.com/questions/20553036/random-color-in-jquery) — Canilho, Oct 22 '16 at 18:37

score 1 · Accepted Answer · answered Oct 22 '16 at 18:41

You can use a random function like the one below and jquery's each function to apply a color to the elements.

  $(function(){
  
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  var colors = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD'];
  $('.abc').each(function(index,el){
    var randomColorIndex = getRandomInt(0,colors.length-1);
    $(el).css('background-color',colors[randomColorIndex]);
  });
});

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

You can read about both here:

jquery each function:https://api.jquery.com/each/

Javascript Random function : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

score 1 · Answer 2 · edited May 23 '17 at 10:30

You have to iterate over each element then assign background-color style to it.

Plain JavaScript Version

var colorsArray = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD'];
var divsArray = document.getElementsByClassName('abc');
var uniqueColorIndex = 0;

for(var i=0; i < divsArray.length; i++){
uniqueColorIndex = Math.floor(Math.random() * (colorsArray.length - 0 + 1));
  divsArray[i].style['background-color'] = colorsArray[uniqueColorIndex];
};

Where, colorsArray have all possible color codes.
uniqueColorIndex finds a a random number of index. Source

Link to jsFiddle

Jquery: random background color

2 Answers2