<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>Me gustaría saber cómo podría evitar que este selector de color aleatorio elija el mismo color dos veces porque actualmente lo está haciendo cuando quiero que elija otro color aleatorio. No sé por qué ocurre esto, qué debo implementar en mi código para evitar que esto ocurra.
Tienes que mantener otra lista, llamémosla: "ya_elegido". Si elige un color con el número de "selección", debe poner ese número en esta lista "ya_seleccionado". Antes de elegir otro color, debe verificar si el número seleccionado se encuentra actualmente en esta lista, de ser así, elija otro.
<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> necesita agregar una variable para recordar los colores usados. Usé una array para hacerlo.
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()); }