Как сделать, чтобы по нажатию на кнопку менялась фоновая картинка в body?

Question

У меня есть 3 картинки и кнопка. По нажатию на кнопку нужно, чтобы фоновая картинка элемента body менялась.

Answer 1

вот так можно currentImageIndex = (currentImageIndex + 1) увеличивая индекс при клике

const images = [
  'https://i.sstatic.net/M6nBQE2p.jpg',
  'https://i.sstatic.net/c8kA4NgY.png',
  'https://i.sstatic.net/yuEEeM0w.jpg'
];


let currentImageIndex = 0;
const changeBgBtn = document.getElementById('changeBgBtn');
changeBgBtn.addEventListener('click', function() {
  //при клике увеличиваем индекс
  currentImageIndex = (currentImageIndex + 1) % images.length;

  //меняем картинку
  document.body.style.backgroundImage = `url(${images[currentImageIndex]})`;
  document.body.style.backgroundSize = '50%';
  document.body.style.backgroundPosition = 'center';
  document.body.style.backgroundRepeat = 'no-repeat';
});

body {
  height: 100vh;
  background-image: url('https://i.sstatic.net/M6nBQE2p.jpg');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  font-size: 16px;
}

<button id="changeBgBtn">Сменить фон</button>

БЛОГ НА HUSL

Как сделать, чтобы по нажатию на кнопку менялась фоновая картинка в body?

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