Переключатель цветов

15 сентября 2021, 15:40

Не могу понять как правильно решить задание. Есть массив цветов в hex-формате и кнопки Start и Stop Нужно написать скрипт, который после нажатия кнопки Start, раз в секунду меняет цвет фона body на случайное значение из массива используя инлайн-стиль. При нажатии на кнопку Stop, изменение цвета фона должно останавливаться.Для генерации случайного числа (индекс элемента массива цветов), нужно использовать функцию randomIntegerFromInterval. Вот что у меня получилось:

const refs={ 
   startBtn: document.querySelector('button[data-action="start"'), 
  stopBtn: document.querySelector('button[data-action="stop"'), 
} 
const colors = [ 
  '#FFFFFF', 
  '#2196F3', 
  '#4CAF50', 
  '#FF9800', 
  '#009688', 
  '#795548', 
]; 
 
const randomIntegerFromInterval = (min, max) => { 
  return Math.floor(Math.random() * (max - min + 1) + min); 
}; 
 
setInterval('colors()',1000)

<button type="button" data-action="start">Start</button> 
<button type="button" data-action="stop">Stop</button>

Answer 1

const refs = { 
    startBtn: document.querySelector('button[data-action="start"'), 
    stopBtn: document.querySelector('button[data-action="stop"'), 
  }, 
  colors = [ 
    '#FFFFFF', 
    '#2196F3', 
    '#4CAF50', 
    '#FF9800', 
    '#009688', 
    '#795548', 
  ], 
  randomIntegerFromInterval = (max) => { 
    return Math.floor(Math.random() * (max + 1)); 
  }, 
  setRandomColor = () => { 
    const _color = colors[randomIntegerFromInterval(colors.length - 1)] 
    console.log(_color) 
    document.body.style.backgroundColor = _color 
  } 
 
let interval = undefined 
 
refs.startBtn.addEventListener('click', e => interval = interval ? 
  interval : 
  setInterval(() => setRandomColor(), 1000)) 
 
refs.stopBtn.addEventListener('click', e => clearInterval(interval))

<button type="button" data-action="start">Start</button> 
<button type="button" data-action="stop">Stop</button>

Answer 2

const colors = [
  '#FFFFFF',
  '#2196F3',
  '#4CAF50',
  '#FF9800',
  '#009688',
  '#795548',
];
const refs = {
  bodyColor: document.querySelector('body'),
  startButton: document.querySelector('.start'),
  stopButton: document.querySelector('.stop'),
};
refs.startButton.addEventListener('click', start);
refs.stopButton.addEventListener('click', stop);
const randomIntegerFromInterval = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};
function changeBackground(color) {
  refs.bodyColor.style.backgroundColor = color;
}
let intervalColorChange = undefined;
function start() {
  intervalColorChange = setInterval(randomNumber => {
    randomNumber = randomIntegerFromInterval(0, 5);
    changeBackground(colors[randomNumber]);
  }, 1000);
  refs.stopButton.removeAttribute('disabled');
  refs.startButton.setAttribute('disabled', true);
}
function stop() {
  clearInterval(intervalColorChange);
  refs.startButton.removeAttribute('disabled');
  refs.stopButton.setAttribute('disabled', true);
}