JS смена фона сайта при нажатии на кнопку (фона url, а не цвета)

Question

Всем привет, я плохо знаком с js так как раньше с ним не работал. Пытался найти в инете, но не нашёл, мне нужно что бы при нажатии на кнопку у меня менялся бэкграунд сайта на следующий а тот на следующий и тд (с 1 на 2, с 2 на 3, с 3 на 4, с 4 на 1) к примеру) и к этому, не понимаю как привязать кнопку к этому действию, так как href не укажешь на действие в js (или я не знаю об этом) а с присваиванием кнопке id она перестаёт работать (или я не правильно это делал).Заранее спасибо...

Answer 1

Я б как-то так реализовывал. В CSS переменные можете вставлять хоть цвета хоть адресса на URL картинки... хотя это не оптимальный вариант. Можно лучше, но поскольку вопрос поставлен так.

var currentColorIndex = 1; // начинаем с первого цвета

document.getElementById('btn').addEventListener('click', function() {
  currentColorIndex++; // увеличиваем индекс цвета при каждом клике

  // Проверяем, если индекс превышает максимальное количество цветов, возвращаем его к 1
  if (currentColorIndex > 4) {
    currentColorIndex = 1;
  }

  // Изменяем цвет фона в соответствии с текущим индексом
  document.body.style.background = `var(--bg${currentColorIndex})`;
});

:root {
  --bg1: #f00;
  --bg2: #ff0;
  --bg3: #f0f;
  --bg4: #00f;
}

body {
  margin: 0;
  background: var(--bg1);
}

<button id="btn">Change background</button>

Answer 2

Для решения вашей задачи на JavaScript, вам потребуется следующий код:

HTML структура с кнопкой и элементом, который будет менять цвет фона:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Изменение цвета фона</title>
</head>
<body>
    <button id="changeBackgroundButton">Изменить цвет фона</button>
    <div id="backgroundContainer"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript код, который будет менять цвет фона при нажатии на кнопку (Сохраните код в файле script.js):

const colors = ['red', 'blue', 'green', 'yellow'];
let currentIndex = 0;

const button = document.getElementById('changeBackgroundButton');
const backgroundContainer = document.getElementById('backgroundContainer');

button.addEventListener('click', () => {
    backgroundContainer.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length;
});

В этом коде массив colors содержит различные цвета, которые вы хотели бы использовать для смены фона сайта. При каждом нажатии на кнопку будет меняться фон на следующий цвет в массиве. Когда достигнут последний цвет, происходит переход к первому цвету снова.

БЛОГ НА HUSL

JS смена фона сайта при нажатии на кнопку (фона url, а не цвета)

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