如何以每个随机数具有不同值的方式在多个位置调用随机数？

Question

So I want to change 4 "a" element background-color and I want to use rgb colors in a way that each color has a random generated number,so the colors will be different every time I call with a function.The problem is that the generated number not changing but use the same random number on all element so it's colors the same.

I could fix that by putting random numbers in an Array and call random numbers from there but it's kind of complicated.

To sum it up:

-I'm looking for a more compact solution to do that

-I also want to use some other method to call this function individually on every element...not in this querySelectorAll way...

Hope everything was clear and Thanks for the answers!:)

function changeCol() {
    var colors = document.querySelectorAll(".con a");
    var x =[255,180,45,99,191,11]
    var y =[25,210,67,49,101,22]
    var z =[156,194,55,9,88,33]

    if(x==x2 || y == y2 || z ==z2){

        return;
    } else {

     colors[0].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";

     colors[1].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";

     colors[2].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";

     colors[3].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";
    }

   x=x2;
   y=y2;
   z=z2;
}

Answer 1

JS Math.random() return a random number between 0 and 1. So you are getting a random number between 0 and 1, after doing ceil() always it is 1. Thats why you are getting always same number.

But you can get random number by setting a range like

 function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } console.log(getRandomInt(6))

MDN reference .

Answer 2

The function will generate a new color whenever called

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

And code will be a lot simpler

var colors = document.querySelectorAll(".con a");
colors.forEach(element => {
    element.style.backgroundColor = getRandomColor()
})

Answer 3

if you need random color(s) you can use randomcolor .
we have used in several projects without problems.