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

<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.

CodePudding user response：

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.

CodePudding user response：

<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.

CodePudding user response：

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());
}