No repeating colours from Array

Question

Learning JavaScript and need some advice. I have a simple piece of code that changes the color of my element when I click it but I want no repeating colours from my array on the onclick event. How would I do this or to help with learning what is the most accepted way of doing this.

Tried using IF statements.

var colors = ["red", "blue", "green", "orange", "purple", "pink"];

document.querySelector('.circle').onclick = function changeColor() {
    var rand = colors[Math.floor(Math.random() * colors.length)];
    document.querySelector('.circle').style.color = rand; 

     console.log(rand);

    }

I expect the colour to change but not repeat itself.

What do you mean by no repeating color, what if you used all colors — Chris Li, Aug 29 '19 at 13:55
Well anytime you use `rand` you can't count on what you get. Why not just keep a counter and update it every click? — j08691, Aug 29 '19 at 13:57
@ChrisLi So when I click the object it doesn't display blue twice for example — Jaindreas, Aug 29 '19 at 13:57
you could check if the randomly selected color is same as current color, if it is then randomly select another one until it's different — Chris Li, Aug 29 '19 at 13:58

score 5 · Accepted Answer · answered Aug 29 '19 at 14:00

Shuffle the array randomly first, and then just step through the array on each click

var colors = ["red", "blue", "green", "orange", "purple", "pink"].sort(() => Math.random() - 0.5);
var i = 0;
document.querySelector('.circle').onclick = function changeColor() {
    var rand = colors[(i++)%colors.length];
    document.querySelector('.circle').style.backgroundColor = rand; 

     console.log(rand);

}

.circle{
    width:20px;
    height:20px;
    border: 1px solid black
}

<div class="circle"></div>

This just cycles the same random array continually, you could choose to re-shuffle when you get to the end if you preferred.

And if someone wants something more shuffled https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — epascarello, Aug 29 '19 at 14:25

score 2 · Answer 2 · answered Aug 29 '19 at 14:03

make a copy of the array and remove the color from it every time one is selected, refill it ( with a copy of the original ) when it gets empty :

var colors = ["red", "blue", "green", "orange", "purple", "pink"];
var copy = [];

document.querySelector('.circle').onclick = function changeColor() {
  if(copy.length === 0) copy = [...colors];
  
  var ndx = Math.floor(Math.random() * copy.length);
  var rand = copy[ndx];
  
  document.querySelector('.circle').style.background = rand;
  
  copy.splice(ndx, 1);
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
}

<div class="circle"></div>

Phil · Answer 3 · 2019-08-30T07:35:45.477

0

You could store the current color in a variable and use an array filter to get the new color.

var colors = ["orange", "red", "green", "blue", "purple", "pink"];
var currentColor;

function getNewColor() {
  var otherColors = colors.filter(c => c !== currentColor);
  var rand = otherColors[Math.floor(Math.random() * otherColors.length)];
  
  document.querySelector(".circle").style.background = rand;
  currentColor = rand;
}

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  margin-top: 15px;
}

<button onclick="getNewColor()">Get Color</button>

<div class="circle"></div>

edited Aug 30 '19 at 07:35

answered Aug 29 '19 at 14:09

Phil

563
4
6
16

runs the risk of trying for ever, and stackoverflowing due to recursive call. – Jamiec Aug 29 '19 at 14:42
That's true, I've changed my code to use an array filter instead. Appreciate this question has already been answered, just trying to offer a different solution. – Phil Aug 29 '19 at 14:50

score -1 · Answer 4 · answered Aug 29 '19 at 14:17

var colors = ["red", "blue", "green", "orange", "purple", "pink"]
var circle = document.querySelector('.circle')
function changeColor() {
    var rand = colors[Math.floor(Math.random() * colors.length)];
   if (circle.style.color === rand) {
    changeColor()
    } else {
    circle.style.color = rand
   }
}

circle.onclick = changeColor;

<div class="circle">TEXT</div>

No repeating colours from Array

4 Answers4