Randomly assigning a unique color to each div upon loading the page

Question

Randomly assigning a unique color to each div upon loading the page

I would like to create an effect where the background color of an icon changes randomly to match the color of the text. There are four predefined color choices available for this randomization.

Here is the current code I am working with:

HTML:

<div class="monobg">
    <img src="http://chloesilver.ca/mono1.png" alt="mono1" />
</div>

CSS:

.monobg  {
    background-color: red;
    padding:10px;
    width:60px;
}

JS:

function random_imglink(){
    var myimages=new Array();
    //define text content below. Add as many entries as needed
    myimages[1]="This is text1.";
    myimages[2]="This is text2.";
    myimages[3]="This is text3.";
    myimages[4]="This is text4.";
    myimages[5]="This is text5.";
    myimages[6]="This is text6.";

    var ry=Math.floor(Math.random()*myimages.length);
    if (ry==0)
        ry=1;
    document.write('<p>'+myimages[ry]+'</p>');
}
document.addEventHandler("ready", function() {
    random_imglink();
    var bgcolorlist = new Array("silver", "#BAF3c3", "#c3baf3", "red");
    document.body.style.color=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
});

I believe the following link might provide some insight, but it's unclear to me how it relates: Random Hex colour from an array

javascript html css

Answer 1

Answer №1

Here is a simple way to achieve this:

HTML:

<div class="monobg">
    <img src="http://chloesilver.ca/mono1.png" />
</div>
<p>Some text</p>

CSS:

.blue {
    color: blue;
}
.monobg {
    background-color: red;
    padding:10px;
    width:60px;
}
.blue .monobg {
    background: blue;
}
.red {
    color: red;
}
.red .monobg {
    background: red;
}
.green {
    color: green;
}
.green .monobg {
    background: green;
}

Pure JS:

function assignColor() {
    var colors = [" red", " green", " blue"],
        cssClass = colors[Math.floor(Math.random() * colors.length)];
    document.querySelector("body").classList.add(cssClass);
}
window.addEventListener("load", assignColor);

Check out the Pure JS JSFiddle for more details.

jQuery:

jQuery(function($) {
    $(document).ready(function() {
        var colors = ["red", "green", "blue"],
            cssClass = colors[Math.floor(Math.random() * colors.length)];
        $("body").addClass(cssClass);
    });
});

See the jQuery JSFiddle for further explanation.

Explanation:

This method involves defining different CSS classes for each color, creating a JavaScript array with these classes, and randomly assigning one of them to the body element when the document is ready using JavaScript or jQuery.

Answer 2

Here is a simple way to achieve this:

HTML:

<div class="monobg">
    <img src="http://chloesilver.ca/mono1.png" />
</div>
<p>Some text</p>

CSS:

.blue {
    color: blue;
}
.monobg {
    background-color: red;
    padding:10px;
    width:60px;
}
.blue .monobg {
    background: blue;
}
.red {
    color: red;
}
.red .monobg {
    background: red;
}
.green {
    color: green;
}
.green .monobg {
    background: green;
}

Pure JS:

function assignColor() {
    var colors = [" red", " green", " blue"],
        cssClass = colors[Math.floor(Math.random() * colors.length)];
    document.querySelector("body").classList.add(cssClass);
}
window.addEventListener("load", assignColor);

Check out the Pure JS JSFiddle for more details.

jQuery:

jQuery(function($) {
    $(document).ready(function() {
        var colors = ["red", "green", "blue"],
            cssClass = colors[Math.floor(Math.random() * colors.length)];
        $("body").addClass(cssClass);
    });
});

See the jQuery JSFiddle for further explanation.

Explanation:

This method involves defining different CSS classes for each color, creating a JavaScript array with these classes, and randomly assigning one of them to the body element when the document is ready using JavaScript or jQuery.

Answer 3

Answer №2

Your code has a few issues that need to be addressed.

1.) Avoid creating a javascript array using

new Array("silver", "#BAF3C3", "#c3baf3", "red")

. It's unnecessarily long and doesn't offer any advantages. Instead, use array literal syntax like this:

["silver", "#BAF3C3", "#c3baf3", "red"]

2.) The functionality can be simplified with the addition of a single variable:

function randomTextAndIconColor(){
    var color = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
    document.querySelector('.monobg').style.backgroundColor = color;
    document.querySelector('body').style.color = color;
}

Answer 4

Your code has a few issues that need to be addressed.

1.) Avoid creating a javascript array using

new Array("silver", "#BAF3C3", "#c3baf3", "red")

. It's unnecessarily long and doesn't offer any advantages. Instead, use array literal syntax like this:

["silver", "#BAF3C3", "#c3baf3", "red"]

2.) The functionality can be simplified with the addition of a single variable:

function randomTextAndIconColor(){
    var color = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
    document.querySelector('.monobg').style.backgroundColor = color;
    document.querySelector('body').style.color = color;
}

Randomly assigning a unique color to each div upon loading the page

HTML:

CSS:

JS:

Answer №1

HTML:

CSS:

Pure JS:

jQuery:

Explanation:

Answer №2

Similar questions

Utilizing object UUID keys to associate products in VueJS

A function in Jasmine for testing that returns a promise

The onmouseup event is not triggering in Vue.js 2

Obtain a selection of CSS classes from various CSS files to show in a dropdown menu

Getting the present location on Google Maps for the web: A step-by-step guide

Tips for implementing and utilizing onclick functions in EJS

Comparison: Traditional Polling vs Using hidden iFrame for Ajax history tracking

Unable to utilize first-child CSS to establish the display

displaying the local path when a hyperlink to a different website is clicked

What could be the reason for Sequelize to completely replace the record when updating in a put request?

Maintaining the scrolling behavior and preserving added class even after refreshing the page

External website's Sharepoint modal dialog

Can I safely refresh the browser during integration test specifications?

Element not chosen in Angular version 6

Transforming an AJAX call into a reusable function

I'm looking to combine multiple RSS feeds into a single feed, then transform the combined feed into JSON data using JavaScript. How can I achieve this?

The error message "reverseMessage is not a function" occurred in Vue.JS

Do developers typically define all flux action types within a constants object as a common programming practice?

Export a specifically designed object from a module using Python

Exploring the integration of Django Rest Framework with Angular