How to make array choose four different options

Question

Does anyone know how I can make my array choose four different options that go under different variables? Now, I have an array with six entities and a function that chooses four of those options and assigns it a variable, but there is the possibility that there will be repeats.

var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']
window.colorOne = '';
window.colorTwo = '';
window.colorThree = '';
window.colorFour = '';


function beginAndGetCombo(){

window.colorOne = colors[Math.floor(Math.random() * colors.length)];
window.colorTwo = colors[Math.floor(Math.random() * colors.length)];
window.colorThree = colors[Math.floor(Math.random() * colors.length)];
window.colorFour = colors[Math.floor(Math.random() * colors.length)];

}


<input type=button value='Get Colors' onclick='beginAndGetCombo()'>

Answer 1

Here a possible way using splice() to remove the element selected from the array of possible colors. The array changes the length in each iteration, and the boundaries of random changes too. Then each iteration we have less colors to choose.

 var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f'] var newcolors = {"colorOne":'',"colorTwo":'',"colorThree":'',"colorFour":''}; for(let color in newcolors){ position = Math.floor(Math.random() * colors.length-1); window[color] = colors.splice(position,1)[0]; } console.log(window.colorOne) console.log(window.colorTwo) console.log(window.colorThree) console.log(window.colorFour) 

Answer 2

It's a bit of a hard coded solution for you. I created a helper array to store selected colors, and filtered array to choose from. The filtered array is constructed from the original colors array with the exclusion of the colors already selected. At the end of the function I used Array Destructuring to assign them to your window.colorX variables. Hope it helps

 const colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']; window.colorOne = ''; window.colorTwo = ''; window.colorThree = ''; window.colorFour = ''; function beginAndGetCombo(){ let selected = []; for (let i = 0; i < 4; i++) { let filteredColors = colors.filter(color => !selected.includes(color)) console.log(filteredColors); selected.push(filteredColors[Math.floor(Math.random() * filteredColors.length)]) } [window.colorOne, window.colorTwo, window.colorThree, window.colorFour] = selected; } 

Answer 3

As suggested by others, shuffling array is simplest and easiest way to go.

 var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']; var randomize = (function(len) { return function() { return Math.floor(Math.random() * len); }; })(colors.length); var shuffled = colors.sort(randomize); var names = ['One', 'Two', 'Three', 'Four']; var color; while (names.length) { color = 'color' + names.shift(); window[color] = shuffled.shift(); console.log(color, window[color]); } 

Answer 4

 var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f'] var colorOne = ''; var colorTwo = ''; var colorThree = ''; var colorFour = ''; var newColor = ''; var newColors = new Array(); function beginAndGetCombo(){ newColor = colors[Math.floor(Math.random() * colors.length)]; if(newColors.indexOf(newColor)==-1){ newColors.push(newColor); }; if(newColors.length!=4){ beginAndGetCombo(); return; }; colorOne = newColors[0]; colorTwo = newColors[1]; colorThree = newColors[2]; colorFour = newColors[3]; console.log(colorOne); console.log(colorTwo); console.log(colorThree); console.log(colorFour); newColors = new Array(); } beginAndGetCombo();