How would I stop an random colour randomise from picking the same colour twice

Question

<script>
      function randomColour(){
        var colour=[];
        colour[0]= '#edf2fb';
        colour[1]= '#d7e3fc';
        colour[3]= '#c1d3fe';
        colour[4]= '#d1d1d1';
        colour[5]= '#e1dbd6';
        colour[6]= '#e2e2e2';
        colour[7]= '#f9f6f2';
        colour[8]='#ffc09f';
        colour[9]='#ffee93';
        colour[10]='#fcf5c7';
        colour[11]='#a0ced9';
        colour[12]='#adf7b6';
        colour[13]='#809bce';
        colour[14]='#95b8d1';
        colour[15]='#b8e0d2';
        colour[16]='#d6eadf';
        colour[17]='#eac4d5';
        colour[18]='#e8d1c5';
        colour[19]='#eddcd2';
        colour[20]='#fff1e6';
        colour[21]='#f0efeb';
        colour[22]='#eeddd3';
        colour[23]='#e8dff5';
        colour[24]='#fce1e4';
        colour[25]='#fcf4dd';
        colour[26]='#ddedea';
        colour[27]='#daeaf6';
        colour[28]='#d3ab9e';
        colour[29]='#eac9c1';
        colour[30]='#ebd8d0';
        colour[31]='#ffe5ec';
        colour[32]='#ffc2d1';
        colour[33]='#ceb5b7';
        colour[35]='#b5d6d6';
        colour[36]='#f2f5ff';
        colour[37]='#efcfe3';
        colour[38]='#eaf2d7';
        colour[39]='#b3dee2';
        colour[40]='#f8ad9d';
        colour[41]='#fbc4ab';
        colour[42]='#ffdab9';
        colour[43]='#cdb4db';
        colour[44]='#ffc8dd';
        colour[45]='#ffafcc';
        colour[46]='#bde0fe';
        colour[47]='#a2d2ff';
        colour[48]='#fdffb6';
        colour[49]='#caffbf';
        colour[50]='#9bf6ff';
        colour[51]='#a0c4ff';
        colour[52]='#ffc6ff';
        colour[53]='#a7bed3';
        colour[54]='#c6e2e9';
        colour[55]='#f1ffc4';
        colour[56]='#ffcaaf';
        colour[57]='#dab894';
        colour[58]='#fec7bc';
        colour[59]='#fcf5ee';
        var pick= Math.floor(Math.random()*60);
        var test = document.getElementById("colorpad");
        test.style.backgroundColor = colour[pick];
        return colour[pick];


      }
    </script>

I would like to know on how I would be able to stop this random colour picker from choosing the same colour twice because it is currently doing this when I want it to pick another random colour. I do not know why this is occurring, what should I implement into my code to stop this from occurring.

Does this answer your question? [How can I remove a specific item from an array?](https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array) — Zev Averbach, Dec 13 '21 at 09:22
As a hint, to get a new color every time, you need to compare the current background color to the new color. If they are the same, you need to pick again. But you need to think about the fact that, by definition, random *could* result in you picking the same color, 10, 20, 20000, or 10e15 times. That's random for you! — Matt Dunn, Dec 13 '21 at 09:23
@Kailau05 Could you clarify whether you want to only prevent the same color being picked twice *in a row*, or for the duration of the program? For example, is red-blue-red-blue-red a valid output? — Matt Dunn, Dec 13 '21 at 09:25
@MattDunn I would only like to prevent the same colour being picked twice, for example red, red I would not like this to occur. — Kailau05, Dec 13 '21 at 09:28

score 0 · Answer 1 · answered Dec 13 '21 at 09:22

0

You have to maintain another list, lets call it: "already_picked". If you choose a color with the "pick" number, you have to put that number into this "already_picked" list. Before you choose another colour, you have to check if the selected number is currently in this list, if so, pick other one.

answered Dec 13 '21 at 09:22

Atlasz

5
3

This only works if the desired behaviour is to prevent the same color being picked twice for the duration of the program. My assumption was that the OP simply wanted the same color being picked *twice in a row*. – Matt Dunn Dec 13 '21 at 09:26

BeanBoy · Answer 2 · 2021-12-13T10:09:39.727

<html>
  <head>
    <script>
      var usedColors = [];
    
      function randomColour(){
        var colour=[];
        colour[0]= '#edf2fb';
        colour[1]= '#d7e3fc';
        colour[3]= '#c1d3fe';
        colour[4]= '#d1d1d1';
        colour[5]= '#e1dbd6';
        colour[6]= '#e2e2e2';
        colour[7]= '#f9f6f2';
        colour[8]='#ffc09f';
        colour[9]='#ffee93';
        colour[10]='#fcf5c7';
        colour[11]='#a0ced9';
        colour[12]='#adf7b6';
        colour[13]='#809bce';
        colour[14]='#95b8d1';
        colour[15]='#b8e0d2';
        colour[16]='#d6eadf';
        colour[17]='#eac4d5';
        colour[18]='#e8d1c5';
        colour[19]='#eddcd2';
        colour[20]='#fff1e6';
        colour[21]='#f0efeb';
        colour[22]='#eeddd3';
        colour[23]='#e8dff5';
        colour[24]='#fce1e4';
        colour[25]='#fcf4dd';
        colour[26]='#ddedea';
        colour[27]='#daeaf6';
        colour[28]='#d3ab9e';
        colour[29]='#eac9c1';
        colour[30]='#ebd8d0';
        colour[31]='#ffe5ec';
        colour[32]='#ffc2d1';
        colour[33]='#ceb5b7';
        colour[35]='#b5d6d6';
        colour[36]='#f2f5ff';
        colour[37]='#efcfe3';
        colour[38]='#eaf2d7';
        colour[39]='#b3dee2';
        colour[40]='#f8ad9d';
        colour[41]='#fbc4ab';
        colour[42]='#ffdab9';
        colour[43]='#cdb4db';
        colour[44]='#ffc8dd';
        colour[45]='#ffafcc';
        colour[46]='#bde0fe';
        colour[47]='#a2d2ff';
        colour[48]='#fdffb6';
        colour[49]='#caffbf';
        colour[50]='#9bf6ff';
        colour[51]='#a0c4ff';
        colour[52]='#ffc6ff';
        colour[53]='#a7bed3';
        colour[54]='#c6e2e9';
        colour[55]='#f1ffc4';
        colour[56]='#ffcaaf';
        colour[57]='#dab894';
        colour[58]='#fec7bc';
        colour[59]='#fcf5ee';
        var pick= Math.floor(Math.random()*60);
        if(usedColors.includes(pick)){
          randomColour();
        }
        usedColors.push(pick);
        document.getElementById("colorpad").style.backgroundColor = colour[pick];
        console.log(usedColors);

      }
    </script>
  </head>
  
  <body>
    <div id="colorpad" style="height: 300px; width: 300px;">
      <button onclick="randomColour()">btn</button>
    </div>  
  </body>
</html>

you need to add a varianble to remember the used Colors. I used an array to do so.

How would this be implemented within A box and not the full screen. I used — Kailau05, Dec 13 '21 at 10:05
Thank you for your assistance, when I clicked the random button 60 times no colours would show. How would I then restart the process ? — Kailau05, Dec 14 '21 at 16:48
you would restart it by clearing the array ``usedColors = []`` like this. — BeanBoy, Dec 15 '21 at 07:34
what if the array is already clear ? Would I need to implement a loop which could repeat the process ? — Kailau05, Dec 20 '21 at 08:38
what do you mean? If the array is clear and you clear it again it is still clear without an error. What is exactly your task? should the color change in a loop automaticly? — BeanBoy, Dec 20 '21 at 08:43

score 0 · Answer 3 · answered Dec 13 '21 at 10:19

var colour = [];
colour[0] = '#edf2fb';
colour[1] = '#d7e3fc';
colour[2] = '#d7e3f3';
colour[3] = '#c1d3fe';
colour[4] = '#d1d1d1';
colour[5] = '#e1dbd6';
colour[6] = '#e2e2e2';
colour[7] = '#f9f6f2';
colour[8] = '#ffc09f';
colour[9] = '#ffee93';
colour[10] = '#fcf5c7';
colour[11] = '#a0ced9';
colour[12] = '#adf7b6';
colour[13] = '#809bce';
colour[14] = '#95b8d1';
colour[15] = '#b8e0d2';
colour[16] = '#d6eadf';
colour[17] = '#eac4d5';
colour[18] = '#e8d1c5';
colour[19] = '#eddcd2';
colour[20] = '#fff1e6';
colour[21] = '#f0efeb';
colour[22] = '#eeddd3';
colour[23] = '#e8dff5';
colour[24] = '#fce1e4';
colour[25] = '#fcf4dd';
colour[26] = '#ddedea';
colour[27] = '#daeaf6';
colour[28] = '#d3ab9e';
colour[29] = '#eac9c1';
colour[30] = '#ebd8d0';
colour[31] = '#ffe5ec';
colour[32] = '#ffc2d1';
colour[33] = '#ceb5b7';
colour[34] = '#ceb5b8';
colour[35] = '#b5d6d6';
colour[36] = '#f2f5ff';
colour[37] = '#efcfe3';
colour[38] = '#eaf2d7';
colour[39] = '#b3dee2';
colour[40] = '#f8ad9d';
colour[41] = '#fbc4ab';
colour[42] = '#ffdab9';
colour[43] = '#cdb4db';
colour[44] = '#ffc8dd';
colour[45] = '#ffafcc';
colour[46] = '#bde0fe';
colour[47] = '#a2d2ff';
colour[48] = '#fdffb6';
colour[49] = '#caffbf';
colour[50] = '#9bf6ff';
colour[51] = '#a0c4ff';
colour[52] = '#ffc6ff';
colour[53] = '#a7bed3';
colour[54] = '#c6e2e9';
colour[55] = '#f1ffc4';
colour[56] = '#ffcaaf';
colour[57] = '#dab894';
colour[58] = '#fec7bc';
colour[59] = '#fcf5ee';

function randomColour() {
    
    if(colour.length > 0){   
        // Get random based on current size of the array
        var pick = Math.floor(Math.random() * colour.length);
        
        var pickedColour = colour[pick];
    
        // remove the colour which was picked.
        colour.splice(pick, 1);

        return pickedColour;
    }
    else{
        // Handle error here or reset the array to original 
        console.log("No color");
        return "#FFFFFF"
    }

}

// To test
for ( let i = 0; i < colour.length; i++){
    console.log(randomColour());
}

How would I stop an random colour randomise from picking the same colour twice

3 Answers3