Как поменять цвет body при нажатии на кнопку

Question

Нужно чтобы каждый раз, когда нажималась кнопка - менялся цвет.

На данном этапе, цвет меняется один раз и нужно обновлять. HTML:

const btn = document.querySelector('.btn');
const body = document.querySelector('body');

const colors = ['rgb(243, 0, 0)', 'rgb(227, 243, 0)', 'rgb(0, 243, 61)', 'rgb(0, 36, 243)']
let result = colors[Math.round(Math.random() * colors.length)];

for (let i = 0; i < colors.length; i++) {
  const elem = colors[i];
  btn.addEventListener('click', changeBtn);

  function changeBtn() {
    body.style.background = result;
  }

}

<button class="btn">Change</button>

Answer 1

Что бы менялся цвет при каждом нажатии на кнопку, надо высчитывать значение цвета при каждом нажатии, а не считать его один раз при загрузке js скрипта:

const btn = document.querySelector('.btn');
const body = document.querySelector('body');

const colors = ['rgb(243, 0, 0)', 'rgb(227, 243, 0)', 'rgb(0, 243, 61)', 'rgb(0, 36, 243)'] 

function changeColor() {
  body.style.background = colors[Math.round(Math.random() * colors.length)];
}

btn.addEventListener('click', changeColor);

<button class="btn">Change</button>

Так же стоит избавиться от 4х одинаковых обработчиков

БЛОГ НА HUSL

Как поменять цвет body при нажатии на кнопку

Ответы (1 шт):