[ANSWERED] javascript – How to change the background image of an element randomly?

Question 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;
    padding: 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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body onkeydown="keypress(event)">
    <div id="a1" onclick="a1click()"></div>
    <script src="script.js"></script>
</body>
</html>

For answer your comment :

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;
    padding: 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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body onkeydown="keypress(event)">
    <div id="a1" onclick="a1click()"></div>
    <script src="script.js"></script>
</body>
</html>

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

Question 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+")";

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

Question 5

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;
    padding: 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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body onkeydown="keypress(event)">
    <div id="a1" onclick="a1click()"></div>
    <script src="script.js"></script>
</body>
</html>

I want the background color of this box to change randomly..Please help, any help is appreciated..

Bollate

[ANSWERED] javascript – How to change the background image of an element randomly?

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Problem :

Comments

Comment posted by Simone Rossaini

Comment posted by Utkarsh Tyagi

Comment posted by Simone Rossaini

By

Related Post

[ANSWERED] html – Move list item to the left in header/navigation menu

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

[ANSWERED] html – Child div has an offset border

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate