Swap three colors every refresh randomly

Question

I have three classes with three different colors. How can I swap the background-colors randomly every page visit?

.projects{background:#99c6c3;}  
.other-things{background:#d3d3d3;}
.about {background:#eedd8d;}

I tried to use this js :

var bgcolorlist=new Array("#99c6c3", "#d3d3d3", "#eedd8d")
$(".projects").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);

But I don't want two colors to be the same.

You can randomize the array and then display in order `[0], [1] and [2]`, because always will be randomized. — Marcos Pérez Gude, Mar 22 '16 at 15:30
See http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Paul, Mar 22 '16 at 15:31
You can view how to randomize an array: http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array (it's better www.phpjs.org ) — Marcos Pérez Gude, Mar 22 '16 at 15:31
Thanks @MarcosPérezGude. No Idea how to display in order, can you give me an example, please? — Federico, Mar 22 '16 at 15:31
I updated your [fiddle](https://jsfiddle.net/cp7a472o/4/) with a solution. It uses splice to remove elements from the `bgcolorlist` when one is used so it can not be used again. — Ben Guest, Mar 22 '16 at 15:33

score 1 · Accepted Answer · answered Mar 22 '16 at 15:34

Updated fiddle

You could choose random color from bgcolorlist then remove it using splice() so it'll not be selected next time :

var bgcolorlist=new Array("#99c6c3", "#d3d3d3", "#eedd8d");
var elements=new Array(".projects", ".about", ".other-things");

for(var i=0;i<elements.length;i++){
  var random = Math.floor(Math.random()*bgcolorlist.length);
  $(elements[i]).css("background-color",bgcolorlist[random]);

  bgcolorlist.splice(random, 1); //remove selected color from array
}

body {font-size:21px; font-family:arial;}
.projects{text-align:center; line-height:100vh;background:#99c6c3; overflow-x: hidden;width: 33%;float:left; height: 100vh;} 
.other-things{text-align:center; line-height:100vh;background:#d3d3d3;overflow-x: hidden;width: 33%;float:left; height: 100vh;}
.about {text-align:center; line-height:100vh;background: #eedd8d; overflow-x: hidden;width: 33%;float:left; height: 100vh;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projects">ONE</div>
<div class="other-things">TWO</div>
<div class="about">THREE</div>

Swap three colors every refresh randomly

1 Answers1