Random background colour on divs

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>

<!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>

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

Random background colour on divs

greencode

greencode

robzilla

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week