Random color on different divs

Question

I have 3 div's

<div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <button>Enter</button> 

I want to give it a random color using css jsscript control. Like this:

 var randomColor = Math.ceil(Math.random() * 3); var color = ""; //Accessing the divs var box1 = document.querySelector("#box1"); var box2 = document.querySelector("#box2"); var box3 = document.querySelector("#box3"); //Event var button = document.querySelector("button"); button.addEventListener("click", randomize, false); button.style.cursor = "pointer"; function render(){ box1.style.background = color; box2.style.background = color; box3.style.background = color; } function randomize(randomColor){ switch(randomColor){ case 1: color = "red"; break; case 2: color = "blue"; break; case 3: color = "green"; break; } render(); } 

The problem is that it gives me the same color in every div. Any idea how I can solve this problem, I want to make it clean javascript and css without jquery, if possible. I am still learning javascript. Thanks..

Answer 1

You can use class es instead of id and simplify your code to the next.

 // You could easily add more colors to this array. var colors = ['red', 'blue', 'green', 'teal', 'rosybrown', 'tan', 'plum', 'saddlebrown']; var boxes = document.querySelectorAll(".box"); var button = document.querySelector("button"); button.addEventListener("click", function () { for (i = 0; i < boxes.length; i++) { // Pick a random color from the array 'colors'. boxes[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; boxes[i].style.width = '100px'; boxes[i].style.height = '100px'; boxes[i].style.display = 'inline-block'; } }); button.style.cursor = "pointer"; 

 <div class="box"></div> <div class="box"></div> <div class="box"></div> <button>Enter</button> 

---

Color randomization on the update / download page.

 // You could easily add more colors to this array. var colors = ['red', 'blue', 'green', 'teal', 'rosybrown', 'tan', 'plum', 'saddlebrown']; var boxes = document.querySelectorAll(".box"); for (i = 0; i < boxes.length; i++) { // Pick a random color from the array 'colors'. boxes[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; boxes[i].style.width = '100px'; boxes[i].style.height = '100px'; boxes[i].style.display = 'inline-block'; } 

 <div class="box"></div> <div class="box"></div> <div class="box"></div> 

Answer 2

How about this?

http://jsfiddle.net/stackmanoz/vymmb10s/

CSS -

 div[class^="box"]{ width:100px; height:100px; border:1px solid; display:inline-block; } 

JQuery -

 var colors = ['red', 'blue', 'green', 'gray', 'black', 'yellow']; $(function(){ $("#btn").click(function() { $('div[class^="box"]').each(function(){ var randomColor = Math.floor(Math.random() * colors.length) $(this).css('background-color', colors[randomColor]) }); }); }); 

Answer 3

 var r = Math.floor(Math.random()*255); var g = Math.floor(Math.random()*255); var b = Math.floor(Math.random()*255); for (var i = 0; i <= 5; i++) { 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>