Assorted hues across various div elements

Question

Assorted hues across various div elements

I need help with randomly coloring 3 div elements using JavaScript-controlled CSS.

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

Here is the code I have so far:

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

However, all three divs end up with the same color. Can anyone suggest a solution? I would like to stick with pure JavaScript and CSS without resorting to jQuery if possible. Thank you for your help!

javascript html css

Answer 1

Answer №1

If you prefer using classes over ids, you can simplify your code by doing the following:

// Easily expand the color options in 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++) {
    // Select a random color from the 'colors' array.
    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>

Refreshing and loading the page with randomized colors.

// Easily expand the color options in this array.
var colors = ['red', 'blue', 'green', 'teal', 'rosybrown', 'tan', 'plum', 'saddlebrown'];
var boxes = document.querySelectorAll(".box");

for (i = 0; i < boxes.length; i++) {
  // Select a random color from the 'colors' array.
  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

If you prefer using classes over ids, you can simplify your code by doing the following:

// Easily expand the color options in 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++) {
    // Select a random color from the 'colors' array.
    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>

Refreshing and loading the page with randomized colors.

// Easily expand the color options in this array.
var colors = ['red', 'blue', 'green', 'teal', 'rosybrown', 'tan', 'plum', 'saddlebrown'];
var boxes = document.querySelectorAll(".box");

for (i = 0; i < boxes.length; i++) {
  // Select a random color from the 'colors' array.
  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 3

Answer №2

What do you think of this?

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

CSS Magic-

div[class^="box"]{
    width:150px;
    height:150px;
    border:2px dashed;
    display:inline-block;
    }

jQuery Fun-

var shades = ['pink', 'purple', 'orange', 'brown', 'cyan', 'magenta'];
$(function(){
     $("#clickme").click(function() {
     $('div[class^="box"]').each(function(){
        var randShade = Math.floor(Math.random() * shades.length)
        $(this).css('background-color', shades[randShade])
                                  });
});
});

Answer 4

What do you think of this?

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

CSS Magic-

div[class^="box"]{
    width:150px;
    height:150px;
    border:2px dashed;
    display:inline-block;
    }

jQuery Fun-

var shades = ['pink', 'purple', 'orange', 'brown', 'cyan', 'magenta'];
$(function(){
     $("#clickme").click(function() {
     $('div[class^="box"]').each(function(){
        var randShade = Math.floor(Math.random() * shades.length)
        $(this).css('background-color', shades[randShade])
                                  });
});
});

Answer 5

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("box")[i].style.backgroundColor = "rgb("+r+","+g+","+b+")";
}

.box {
width: 200px;
height:200px;
display: inline;
float: left;
margin: 15px;
background-color: red;
}

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

Answer 6

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("box")[i].style.backgroundColor = "rgb("+r+","+g+","+b+")";
}

.box {
width: 200px;
height:200px;
display: inline;
float: left;
margin: 15px;
background-color: red;
}

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

Answer 7

Answer №4

*

<html>
        <head>
            <style>
                div {
                    width: 100px;
                    height: 100px;
                    position: relative;
                    border: 1px solid black;
                    float: left;
                    margin: 5px;
                }
            </style>
        </head>
        <body>
            <div id="first"></div>
            <div id="second"></div>
            <div id="third"></div>
            <div id="fourth"></div>
        </body>
        <script>
            let colors = ['red', 'green', 'blue', 'yellow'];
            (function () {
                document.getElementById("first").style.backgroundColor = assignColor();
                document.getElementById("second").style.backgroundColor = assignColor();
                document.getElementById("third").style.backgroundColor = assignColor();
                document.getElementById("fourth").style.backgroundColor = assignColor();
            })();
            function assignColor() {
                let colorIndex = Math.floor(Math.random() * colors.length);
                let color = colors[colorIndex];
                colors.splice(colorIndex, 1);
                return color;
            }
        </script>
    </html>

Answer 8

*

<html>
        <head>
            <style>
                div {
                    width: 100px;
                    height: 100px;
                    position: relative;
                    border: 1px solid black;
                    float: left;
                    margin: 5px;
                }
            </style>
        </head>
        <body>
            <div id="first"></div>
            <div id="second"></div>
            <div id="third"></div>
            <div id="fourth"></div>
        </body>
        <script>
            let colors = ['red', 'green', 'blue', 'yellow'];
            (function () {
                document.getElementById("first").style.backgroundColor = assignColor();
                document.getElementById("second").style.backgroundColor = assignColor();
                document.getElementById("third").style.backgroundColor = assignColor();
                document.getElementById("fourth").style.backgroundColor = assignColor();
            })();
            function assignColor() {
                let colorIndex = Math.floor(Math.random() * colors.length);
                let color = colors[colorIndex];
                colors.splice(colorIndex, 1);
                return color;
            }
        </script>
    </html>

Answer 9

Answer №5

As I scanned through the listed string colors, I was shocked to find no mention of hex colors being used. For those individuals seeking something out of the ordinary, here is an alternative approach:

function generateRandomInt(max=1, min=0){
    // scale random number from 0 to 1 to desired range
    return parseInt( Math.random() * (max - min) + min );
}
function formatTwoPlaces(sNumber=''){
    // ensure all strings have a length greater than 1
    //   eg: "f" => "0f"
    return sNumber.length > 1 ? sNumber : formatTwoPlaces('0'+sNumber);
}
function createRandomColor(){
    // generate each color's hex string
    let red = formatTwoPlaces( generateRandomInt(255,0).toString(16) );
    let green = formatTwoPlaces( generateRandomInt(255,0).toString(16) );
    let blue = formatTwoPlaces( generateRandomInt(255,0).toString(16) );
    // return hex color string
    return `#${red}${green}${blue}`;
}
function updateElementColors(){
    // iterate through all elements with class "random"
    document.querySelectorAll(".random").forEach( (element)=>{
        // assign a random hex color to each element
        element.setAttribute("style",`background-color:${ createRandomColor() }`);
    } );
}

// add functionality to randomizer button
let colorRandomizerBtn = document.querySelector("#colorRandomizer");
colorRandomizerBtn.addEventListener("click",updateElementColors);
// initialize colors
colorRandomizerBtn.dispatchEvent( new Event("click") );

div {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.random{
    height: 100px;
}

<button id="colorRandomizer">Randomize</button>
<div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
</div>

Answer 10

As I scanned through the listed string colors, I was shocked to find no mention of hex colors being used. For those individuals seeking something out of the ordinary, here is an alternative approach:

function generateRandomInt(max=1, min=0){
    // scale random number from 0 to 1 to desired range
    return parseInt( Math.random() * (max - min) + min );
}
function formatTwoPlaces(sNumber=''){
    // ensure all strings have a length greater than 1
    //   eg: "f" => "0f"
    return sNumber.length > 1 ? sNumber : formatTwoPlaces('0'+sNumber);
}
function createRandomColor(){
    // generate each color's hex string
    let red = formatTwoPlaces( generateRandomInt(255,0).toString(16) );
    let green = formatTwoPlaces( generateRandomInt(255,0).toString(16) );
    let blue = formatTwoPlaces( generateRandomInt(255,0).toString(16) );
    // return hex color string
    return `#${red}${green}${blue}`;
}
function updateElementColors(){
    // iterate through all elements with class "random"
    document.querySelectorAll(".random").forEach( (element)=>{
        // assign a random hex color to each element
        element.setAttribute("style",`background-color:${ createRandomColor() }`);
    } );
}

// add functionality to randomizer button
let colorRandomizerBtn = document.querySelector("#colorRandomizer");
colorRandomizerBtn.addEventListener("click",updateElementColors);
// initialize colors
colorRandomizerBtn.dispatchEvent( new Event("click") );

div {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.random{
    height: 100px;
}

<button id="colorRandomizer">Randomize</button>
<div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
</div>

Assorted hues across various div elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Changing the information of objects stored in arrays using React Three Fiber

"Enhancing User Experience with Bootstrap's Smooth Transition Effects for fadeIn() and fade

How can you effectively retrieve values in Chakra Core without encountering any memory complications?

jQueryUI modal dialog size

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

Scouring through the text to find a specific word and bring it to the forefront

Enhance the appearance of your HTMLEditorField in SilverStripe 3.2 by customizing its CSS style using

Embed an external webpage within your own and make full use of its content

Fetching Unicode block specials using axios in getStaticProps with Next.js

The concept of Puppeteer involves defining the browser and page in a synchronous manner

The bidirectional bindings within the component are malfunctioning

Utilizing Mirth Connect to insert XML data into a MySQL database using JavaScript

What is the best way to showcase a ul element as inline-block?

attempting to retrieve the selected values from within an iframe

What are some strategies for preventing the $window.alert function from being triggered within an AngularJS controller's scope?

Reduce the number of days from a specified ISO date

Exploring the Power of Nested *ngFor in Angular 2

D3 circle packing showcases a concise two-line label text

Subclass declaration with an assignment - React.Component