@Sirius077

Как сгенерировать несколько свойств в одной переменной?

Есть мини-программа которая генерирует несколько цветов(https://codepen.io/Sirius1505/pen/yLVQOQm). Но есть проблема, мне нужно сгенерировать каждому блоку разные цвета. В коде у всех одинаковые цвета. Как можно сделать это с помощью одной переменной(randomColor в коде)?
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 1
Seasle
@Seasle Куратор тега JavaScript
Базово так:
-let randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
-button1.style.backgroundColor = randomColor;
-button2.style.backgroundColor = randomColor;
-button3.style.backgroundColor = randomColor;
-button4.style.backgroundColor = randomColor;
+let randomColor = () => '#' + Math.floor(Math.random()*16777215).toString(16);
+button1.style.backgroundColor = randomColor();
+button2.style.backgroundColor = randomColor();
+button3.style.backgroundColor = randomColor();
+button4.style.backgroundColor = randomColor();

Но лучше так:
const buttons = document.querySelectorAll('[id^="color"]');

const randomNumber = (max) => Math.round(Math.random() * max);

const generateColor = () => `hsl(${randomNumber(360)}, ${randomNumber(100)}%, ${randomNumber(100)}%)`;

for (const button of buttons) {
	button.style.setProperty('background-color', generateColor());
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы