Random color from array on website

Question

Pretty new to code. Having some trouble implementing some code to randomize the background color of part of my website to change based on an array. Found this code:

$(document).ready(function(){
  var colors = ["#4ECDC4","#FF6B6B","#313638","#FFE66D"];                
  var rand = Math.floor(Math.random()*colors.length);           
  $(‘#u97’, ‘#u379’).css("background-color", colors[rand]);
});

The "#u97, #u379" are the divs that I want to change the background color of. I insert the code in the header with a "script" tag but nothing happens. There is also a master CSS file that the divs get the color from, could that be interfering with something?

First of all, the selectors are in one string with no comma. Second of all, those quotes look awfully strange... — Andrew Li, Sep 11 '16 at 21:47
Are you including jQuery in your code? Because that code uses it (`$(document).ready`). If not, you can either include it or look for a pure JavaScript code. — yuriy636, Sep 11 '16 at 21:48

score 0 · Answer 1 · answered Sep 11 '16 at 21:49

0

try this:

$(document).ready(function(){
  var colors = ["#4ECDC4","#FF6B6B","#313638","#FFE66D"];                
  var rand = Math.floor(Math.random()*colors.length);           
  $('#u97').css("background-color", colors[rand]);
  $('#u379').css("background-color", colors[rand]);
});

answered Sep 11 '16 at 21:49

Bartłomiej Gładys

4,525
1
14
24

Thanks, but it didn't seem to function. It's supposed to choose a different color on each reload but it's not. – Efren Martinez Sep 11 '16 at 21:54
I think your rand is not seeded with something that is different every time. Your code would probably repeat the same sequence every time you load the page unless you seed it with something like a datetime for instance. – nocturns2 Sep 11 '16 at 22:06
My mistake. please see this post: http://stackoverflow.com/questions/521295/javascript-random-seeds – nocturns2 Sep 11 '16 at 22:09

score 0 · Answer 2 · answered Sep 11 '16 at 21:52

$(document).ready(function(){
  var colors = ["#4ECDC4","#FF6B6B","#313638","#FFE66D"];                
  var rand = function () {
    return Math.floor(Math.random()*colors.length);        
  };
  
  $("#u97, #u379").each(function () {
    $(this).css("background-color", colors[rand()]);
  });
});

div {height: 50px; width: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="u97"></div><div id="u379"></div>

Random color from array on website

2 Answers2