CODEWITHSUNDEEP
javascriptjquery
user2989731
user2989731

Reputation: 1359

Set random background colors for multiple divs

I have multiple div's on a page that I'd like to assign a random background color to. If possible, the colors should not repeat themselves unless I run out of colors to use. I've managed to get the div containers to load with a random color from an array, but the color is always the same for all of the remaining divs. Is there anything I can do to set the background color to a different value if the background color is already in use by another div?

Here's what I have so far (non working)

function shuffleColors() {
    var colors = ["bg-red", "bg-green", "bg-purple", "bg-blue"];
    var randomColor = Math.floor(Math.random()*colors.length);
    // var randomColor = colors[Math.floor(Math.random()*colors.length)];
    var contentBlock = $('.content-block');

    for (var i = 0; i < contentBlock.length; i++) {

        if (colors[i] == colors[randomColor]) {
            colors[randomColor]++
            contentBlock.addClass(colors[randomColor]);
        }

    }
}

shuffleColors();

The code below shows how I managed to select a random background color, however the color is the same for all divs

var background = ["bg-red", "bg-green", "bg-purple", "bg-blue"];
var randomColor = Math.floor(Math.random()*background.length);           

$('.content-block').addClass(background[randomColor]);

Upvotes: 0

Views: 2292

Answers (4)

Manoj
Manoj

Reputation: 1

It will work 100% and it is made of pure Javascript.

for (var i = 0; i <= 5; i++) {
		var r = Math.floor(Math.random()*255);
		var g = Math.floor(Math.random()*255);
		var b = Math.floor(Math.random()*255);
		var div = document.getElementsByClassName("div")[i].style.backgroundColor = "rgb("+r+","+g+","+b+")";
}
div {
	width: 200px;
	height:200px;
	display: inline;
	float: left;
	margin: 15px;
	background-color: red;
}
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

Upvotes: 0

ediblecode
ediblecode

Reputation: 11971

You're definitely along the right lines, but you can simplify your loop and use .each() function to iterate over all of the $('.content-block') elements on your page. You're alos only setting the random colour once, so you can move that into the each function: 

$('.content-block').each(function(i, el) {
    var randomColor = Math.floor(Math.random()*background.length);
    $(el).addClass(background[randomColor]);
});

I've also just realised that you might want each $('.content-block') to be a different colour from the other. In which case, you want to remove the colour from colors each time you've assigned a colour:

function getRandomColour() {
    var randomNumber = Math.floor(Math,random()*colors.length();
    var randomColour = colors[randomNumber];
    var colourPosition = colors.indexOf(randomColour);

    colours.splice(colourPosition, 1); // Remove colour from array

    return randomColour;    
}

$('.content-block').each(function(i, el) {
    $(el).addClass(background[randomColor]);
});

Upvotes: 2

Bic
Bic

Reputation: 3134

It looks like the problem might be with how you are incrementing your random color:

colors[randomColor]++

That isn't the correct way. You probably just want to increment the index in the array:

randomColor++

You also need to make sure you are staying within the bounds of your color array. I would suggest using mod (%) for that:

randomColor = (randomColor + 1) % colors.length

Using jQuery to loop, you would have somethign like:

$(".content-block").each(function () {
    $(this).addClass(colors[randomColor]); // assign the color
    randomColor = (randomColor + 1) % colors.length; // step to the next color; this will loop to the beginning thanks to mod
});

Upvotes: 1

Hugo S. Mendes
Hugo S. Mendes

Reputation: 1086

change this

contentBlock.addClass(colors[randomColor]);

to this:

contentBlock[i].addClass(colors[randomColor]);

Hope it helps.

Upvotes: 0

Related Questions