Welcome to WebmasterWorld Guest from 107.23.37.199

Forum Moderators: open

Message Too Old, No Replies

Random background colour on divs

     
8:52 am on Apr 4, 2016 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I'm currently using this code in order to change the background colour of a single div each time the page is refreshed. However, I'd really like to be able to have random background colours (based on a set series of colours) for each of the "post" divs when the page is refreshed. I've tried changing the "getElementById('posts')" to "getElementsByClass('post')" but that doesn't work.

Also, is there any way to run the script with a "div onload" as opposed to "body onload"?

Any ideas or help would be greatly appreciated.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
.post {
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body onload="return ran_col()">
<div id="posts">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
</body>
</html>
9:19 am on Apr 4, 2016 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Actually think I might have figured it out:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
.post {
width: 100px;
height: 100px;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="posts">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
<script type="text/javascript">
$(".post").each(function() {
var color = '#'; // hexadecimal starting symbol
var letters = ['eee','ddd','ccc','aaa','888','777','666','555']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
$(this).css("background-color", color);
});
</script>
</body>
</html>
12:20 pm on Apr 4, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


It's getElementsByClassName, not getElementsByClass, and it's not interchangeable with getElementById because an id can only occur once per page, so getElementById returns an object, whereas classes can be used multiple times, so getElementByClassName returns an array of objects. You don't really need an onload event in your example, unless you actually want to postpone code execution.

<script>
var colors = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];
var posts = document.getElementsByClassName('post');
for (var i = 0; i < posts.length; i++) {
posts[i].style.background = '#' + colors[Math.floor(Math.random() * colors.length)];
}
</script>

$(".post").each() does the same as the combination of getElementsByClassName and the for loop in my code example, so you really don't need a large library like jQuery for this.

Also, since you use the HTML5 doctype, you can drop type="text/javascript" from the script element.