Как через JS задать определённые цвета чтобы повторялись они случайно?

Рейтинг: 0Ответов: 2Опубликовано: 16.02.2023

Есть вот такой див <div class="table"></div>

вот js

let table = document.querySelector('.table');
let amountBoxes = 621;
let colors = ['white', 'red', 'orange', 'pink', 'purple', 'yellow', 'green', 'blue']

for (let i = 0; i < amountBoxes; i++) {
    let box = document.createElement('div')
    box.classList.add('box')
    table.append(box)
    box.addEventListener('mouseenter', () => setColor(box))
    box.addEventListener('mouseleave', () => removeColor(box))

}



function setColor(box) {
    box.style = `background: orange`
}
function removeColor(box) {
    box.style = `background: ''`
}

здесь -

 function setColor(box) {
    box.style = `background: orange`
}

отрабатывает только приписанные цвета, а нужно white, red, orange, pink, purple, yellow, green, blue в рандомном порядке

Нужно чтобы при наведении они меняли цвет

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1

let table = document.querySelector('.table');
let amountBoxes = 10;

for (let i = 0; i < amountBoxes; i++) {
    let box = document.createElement('div')
    box.classList.add('box')
    table.append(box)
    box.addEventListener('mouseenter', (e) => setColor(box))
    box.addEventListener('mouseleave', (e) => removeColor(box))
}

function setColor(box) {    
    let colors = ['white', 'red', 'orange', 'pink', 'purple', 'yellow', 'green', 'blue'];
    let r = Math.floor(Math.random() * colors.length);
    box.style.background = colors[r];
}
function removeColor(box) {
    box.style.background = '';
}
.table div {
  border: 1px solid grey;
  width: 50px;
  height: 20px;
}
<div class="table"></div>

▲ 0

в цикле поставьте какой нибудь рандомайзер, который будет выдавать рандомное число от 0 до color.length - 1, и берите с массива элемент по индексу, который выдал рандомайзер, и далее уже созданному box присвойте:

box.style = `background: ${randomColor}`