Mehmet Burak Erman Mehmet Burak Erman - 3 months ago 11
Javascript Question

How can i make sure each 2 random colors are used two times?

Guys i want to get 2 random colors and make

background-color
for my 4 divs from those 2 selected colors.

What i want is how can i make sure each that 2 colors are used as
background-color
2 times.

(In my code sometimes i see one random color as background-color 3 times.)

JSFIDDLE



$(function() {
function getRandomArrayElements(arr, count) {
var shuffled = arr.slice(0),
i = arr.length,
min = i - count,
temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}

var randomColor1 = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
var randomColor2 = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

var colors = [randomColor1, randomColor2];


$(".first").css("background-color", getRandomArrayElements(colors, 1));
$(".second").css("background-color", getRandomArrayElements(colors, 1));
$(".third").css("background-color", randomColor1);
$(".fourth").css("background-color", randomColor2);

});

div {
width: 100px;
height: 100px;
border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>




Answer

How about this:

function removeRandomElement(colors) {
  return colors.splice(Math.floor(Math.random() * colors.length), 1)[0];
}

var colors = [randomColor1, randomColor1, randomColor2, randomColor2];

$(".first").css("background-color", removeRandomElement(colors));
$(".second").css("background-color", removeRandomElement(colors));
$(".third").css("background-color", removeRandomElement(colors));
$(".fourth").css("background-color", removeRandomElement(colors));
Comments