Я хочу сгенерировать случайный цвет с помощью rgb в JavaScript, но это не работает

#javascript

Вопрос:

это мой код

 document.querySelector(".btn").addEventListener("click", colorChange)
function colorChange() {
  var arr = []
  for (let i = 0;i<3;i  ) {
    var random = Math.floor(Math.random() * 255)
    arr.push(random)
  }
  document.querySelector("body").style.backgroundColor = "rgb(arr[0], arr[1], arr[2])"
}
 

сначала я добавил прослушиватель событий к кнопке с классом «btn», а затем я объявил функцию и объявил в ней пустой массив под названием «arr», а затем я использовал цикл for и объявил переменную под названием random, чтобы сгенерировать три случайных числа, переместив
их в пустой массив

Ответ №1:

   document.querySelector("body").style.backgroundColor = "rgb(arr[0], arr[1], arr[2])"
 

В настоящее время вы передаете статическое строковое значение rgb(arr[0], arr[1], arr[2]) .

Решение:

   document.querySelector("body").style.backgroundColor = `rgb(${arr[0]}, ${arr[1]}, ${arr[2]})`
 

Комментарии:

1. Просто rgb(${arr})

Ответ №2:

Вы не получаете доступ к полям массива. Вы написали только строку. Сделай это так.

  document.querySelector("body").style.backgroundColor = "rgb("   arr[0]   ","   arr[1]   ","   arr[2]  ")"
 

Комментарии:

1. Это работает, и это нормально, но Уильям дал лучшее решение.

Ответ №3:

Верните с помощью своей функции строку rgb, которая вам нужна, созданную со случайными значениями, например, как показано ниже.

Затем просто используйте его там, где вы хотите его использовать, например, в своем style.backgroundColor , если хотите.

 function random_rgb() {
    var o = Math.round, r = Math.random, s = 255;
    return 'rgb('   o(r()*s)   ','   o(r()*s)   ','   o(r()*s)   ')';
}
    
var color = random_rgb();        
document.querySelector("body").style.backgroundColor = color  
console.log(color)