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

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

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

На данном этапе, цвет меняется один раз и нужно обновлять. 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>

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

Ответы

▲ 3Принят

Что бы менялся цвет при каждом нажатии на кнопку, надо высчитывать значение цвета при каждом нажатии, а не считать его один раз при загрузке 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х одинаковых обработчиков