Nov 20, 2022

# Solution 1 :

as you can see from the code, I created a function that randomizes the numbers and puts them in the rgb.

function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
return  bgColor;

}

function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundColor = random_bg_color();
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}

*{
margin: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
@keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}

100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>

Generate random image:

var Images = new Array("https://via.placeholder.com/150/0000FF/808080","https://via.placeholder.com/150/FF0000/FFFFFF",
"https://via.placeholder.com/150/FFFF00/000000");

function randompic() {
var randomNum = Math.floor(Math.random() * Images.length);
return Images[randomNum];

}

function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundImage = "url('"+randompic()+"')";
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
@keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}

100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>

# Solution 2 :

This seems to work:

http://jsfiddle.net/mcuzq9rb/

I included a random color generator and applied it to the style of the floating squares.

Let me know if it’s what you wanted.

# Solution 3 :

I would style the box with an rga-value, similar to how you randomly set the size of the bubble:

var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);

bubbles.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";

# Solution 4 :

Here’s a little function that uses rando.js to set an element’s background color to a random hex string.

function setRandomBackgroundColor(element) {
var hexString = "#";
for (var i = 0; i < 3; i++) {
var hex = rando(255).toString(16);
hexString += hex.length == 1 ? "0" + hex : hex;
}
element.style.backgroundColor = hexString;
}
<script src="https://randojs.com/1.0.0.js"></script>
<button onclick="setRandomBackgroundColor(document.body);">Set random background color</button>

# Problem :

I have recently created a program which creates new element when someone clicks it. The new element which is created has some specific CSS styling. Now i want it’s background to randomly change when the user clicks on button. Like the first time when someone clicks the background is red another time its green and so on like this.. My code is –

function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
@keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}

100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>

### Comment posted by Utkarsh Tyagi

Hey can u help me once more.. Now to make it more acceptable i want to select random images as background..

### Comment posted by Simone Rossaini

Yes, can you use php or just javascript? alwys in the square?