Applying a random background colour to multiple DIVs

Question

I have a series of DIVs on the page (each with the same class). On load, I'd like to randomise the colour of each DIV.

I'd like a colour to be chosen for a given DIV, then a colour chosen for the next one and so on.

I found this post: Apply random color to class elements individually?

I don't understand jquery, however I have begun by changing the code to reflect the name of the class I am using:

$(document).ready(function() {
$('.main').each(function () {
    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
    $(.jump-response).css("background-color", hue);
});
});

Further help would be much appreciated!

--

Code example here: http://jsfiddle.net/ollyf/LmwYP/

And I should also add the random background colour is from a preset/predetermined list of colours.

Milden

What seems to be the problem (other than not quoting the .jump-response element and setting the background on the same element on every iteration) ? – Aracelyaraceous

Always post the relevant HTML, even better a jsfiddle. – Flavorsome

If you are changing background of .jump-response, you don't need to loop through .main – Syllable

Answer 1

I dont know your html, but assuming your div are defined as following.

<div class="jump-response">one</div>
<div class="jump-response">two</div>

The main problem in your code is how you select the elements.

1. Solution

$(function() {
    $(".jump-response").each(function() {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
         $(this).css("background-color", hue);
    });
});

jsFiddle Demonstration

2. Solution

You can use the following function to get a random color

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

and apply the color using

$(".jump-response").each(function() {
    $(this).css("background-color", get_random_color());
});

jsFiddle Demonstration

Hulett

That doesn't seem to work for me. Clearly I'm missing something important! Here's my HTML and CSS (before I've added the jQuery). Note that I'm using bootstrap, so I've left out the CSS for rows, containers etc. Plus, the DIVs are rendered via a Wordpress loop. Maybe that's the problem? – Milden

This seems to work. I have added the jquery and this is the result jsfiddle.net/LmwYP/1 – Hulett

Answer 2

I believe you just need to add quotes around .jump-response

$(".jump-response").css("background-color", hue);

Also, you're looping through all elements with a class of 'main' but then doing nothing to that element, so I think you can remove the loop code.

Schopenhauerism

Answer 3

Try this

$(document).ready(function() {
  $('.jump-response').each(function () {
      var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
      $(this).css("background-color", hue);
  });
});

Syllable

Answer 4

To get random colors for divs on demand, make this a bookmark on your browser:

javascript:jQuery("div").each(function() {var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';jQuery(this).css("background-color", hue);});

The opening "javascript:" (without quotes) is needed for the bookmark, otherwise that's just jQuery.

Newhall