К основному контенту

Динамичное изменение фона сайта по клику (JS)

Динамическое изменение фона сайта по клику, с использованием array со всеми желаемыми цветами. Сделано было в качестве выполнения одного из заданий из JavaScript 100 projects for Begginers.

HTML разметка роли не играет, просто кнопка для возможности запуска функции при клике на нее.

HTML:

<button id='button'>Click</button>

Переменная i здесь применяется для того, чтобы каждый раз запуская функцию мы вытаскивали из array новый цвет, соответствующий его индексу [0, 1, 2]. Так как в array у нас всего 3 цвета, то переменная i будет сбрасываться на 0 каждый раз когда ее значение будет равно 3.

JS:

let colors = ['red', 'blue', 'yellow'];
let i = 0;

function changeBack() {
  i++;
  if (i == 3) i = 0;
  document.querySelector('body').style.background = colors[i];
}

document.getElementById('button').addEventListener('click', changeBack);

Живой пример на JSFIDDLE

Комментарии