Как менять цвет фона по кнопке?
Привет всем! Как можно реализовать измение цвета фона по кнопке. Тоесть как дарк мод, только кнопок должно быть больше. Например, красная кнопка при нажатии меня цвет фона боди на красный, синяя на синий и тд. Заранее спасибо!
Дополнительно:
Здравствуйте, покажите код, как вы пытались реализовать? Так как тут только подсказывают ошибки ваших стараний.
Если 2 кнопки то оно либо добавляет к боди условно active либо убирает, а как так провернуть с большим количеством кнопок?
Добавлять не active, а какой-то другой класс или data-атрибут. Тот, который будет отвечать за нужную цветовую схему.
А дальше всё тоже самое.
document.querySelector('#purple').addEventListener('change', function(event){
document.querySelector('body').classList.toggle('purple');
});
document.querySelector('#red').addEventListener('change', function(event){
document.querySelector('body').classList.toggle('red');
});
вот хтмл
purple
red
еще не стилизовал
нужно как-то реализовать, чтобы они парралельно могли работать
только сейчас оно работет только еслинажать еще раз на активную кнопку
нужно как-то реализовать, чтобы они парралельно могли работать
тоесть когда в бади добавился клас ред, чтобы при нажатии на новую кнопку, клас ред убирался, а добавлялся другой
А значит, лучше использовать data-
У кнопок тоже прописать data-
У кнопки получить - на body навесить.
Кнопки перебирать в цикле.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения цвета фона по нажатию кнопки вам необходимо использовать JavaScript. Вот пример кода, который поможет вам реализовать данную функциональность:
```html
body {
text-align: center;
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
Change Background Color
const button = document.getElementById('changeColorButton');
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
let currentColorIndex = 0;
button.addEventListener('click', function() {
document.body.style.backgroundColor = colors[currentColorIndex];
currentColorIndex = (currentColorIndex + 1) % colors.length;
});
```
В данном коде мы создаем кнопку с id "changeColorButton" и массив цветов colors. При нажатии на кнопку мы меняем цвет фона body на следующий цвет из массива colors. Таким образом, каждое нажатие кнопки будет менять цвет фона на следующий цвет из массива.
Вы можете добавить или изменить цвета в массиве colors по своему усмотрению. Также можно настроить другие стили кнопки и страницы в соответствии с вашим дизайном.
Надеюсь, это поможет вам реализовать изменение цвета фона по кнопке на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.