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

Question

[Sirius 077]

Есть мини-программа которая генерирует несколько цветов(https://codepen.io/Sirius1505/pen/yLVQOQm). Но есть проблема, мне нужно сгенерировать каждому блоку разные цвета. В коде у всех одинаковые цвета. Как можно сделать это с помощью одной переменной(randomColor в коде)?

Answer 1

[Александр]

Базово так:

-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());
}

Comments

[Sirius 077]

Спасибо за ответ, что-то сложновато мне понять второй вариант но попытаюсь понять)

[Kovalsky]

А с чего hsl вдруг возник?

[Александр]

Kovalsky, Намного удобнее. А так да, можно любой формат использовать.