Randomly changing colors of specified elements within one div or post

Question

I have in mind a design idea where certain elements of a post will have the same random color values.

Example:

<post>
<top border-top = random color>
<h1 color = same random color>
text body copy (not random color)
<div background = same random color>
more elements (not random color)
<bottom border-bottom = same random color>
<end post>

I have tried this on my own and got something like this, but couldn't figure out how to select the multiple elements.

http://jsfiddle.net/r74j6/200/

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;
}


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

Generate the random colors and store in vars, then use those var values in your html construction? — cssyphus, Aug 12 '13 at 20:51
BTW - There's another way you can generate HEX color which looks a bit more efficient to me. You can random a number from 0 to 16,777,215 (256^3 - 1) and then send it to a function similar to the intToARGB(i) function shown here: [link](http://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-jquery-javascript) — Itay, Aug 12 '13 at 21:13

score 1 · Answer 1 · answered Aug 12 '13 at 20:53

1

In order to recolor all elements fitting the selector you provide to JQuery, remove the .each() call from your code.

In your example, replace:

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

with

$(".post").css('background-color', get_random_color());

Then all elements with the class ".post" will be colored to the same random color all at once.

answered Aug 12 '13 at 20:53

bwright

347
1
15

Looks good to me. Cause you are calling the function `get_random_color()` for each and every element with a class of `post`, this way, you only call it once! – Solomon Closson Aug 12 '13 at 20:56
Notice how he asked that every post element will have different coloring. Your code right now just give them all the same color. – Itay Aug 12 '13 at 21:03
@Itay Itai: To quote the original post, "I have in mind a design idea where certain elements of a post will have the same random color values." The original poster requested that all the elements should have the same color. – bwright Aug 13 '13 at 02:18

Itay · Accepted Answer · 2013-08-13T14:11:01.160

1

You need to change your code a bit to look like this:

$(".post").each(function() {
    var color = get_random_color();
    $(this).children("h1, div").css('background-color', color);
});

Notice you can change the children selector at will.

Here's a working example: http://jsfiddle.net/r74j6/212/

edited Aug 13 '13 at 14:11

answered Aug 12 '13 at 21:00

Itay

16,601
2
51
72

Thanks so much for your help. In this example how would I go about adding the same "color" as a border (with 1px solid) and as for the h1 font color since these are two different kind of element that I would be targeting? correct? – user2676385 Aug 13 '13 at 13:05
nevermind I think I got it. If you feel that you can improve please let me know. http://jsfiddle.net/r74j6/211/ – user2676385 Aug 13 '13 at 14:12
I've updated the link to the example I gave you. You can control any child element inside the "each()" function. – Itay Aug 13 '13 at 14:12

Randomly changing colors of specified elements within one div or post

2 Answers2