Как менять цвет фона по кнопке?

Question

[vittallyyaaa]

Привет всем! Как можно реализовать измение цвета фона по кнопке. Тоесть как дарк мод, только кнопок должно быть больше. Например, красная кнопка при нажатии меня цвет фона боди на красный, синяя на синий и тд. Заранее спасибо!

Comments

[Николай]

Здравствуйте, покажите код, как вы пытались реализовать? Так как тут только подсказывают ошибки ваших стараний.

[vittallyyaaa]

Николай, без понятия как реализовать с несколькими кнопками. Если 2 кнопки то оно либо добавляет к боди условно active либо убирает, а как так провернуть с большим количеством кнопок?

[Николай]

vittallyyaaa, можете показать код? Или же просто в каждую кнопку, например, забить дата-атрибут со значением цвета. После в скрипте их все найти и перебрать циклом, навесив обработчик клика по кнопке и при клике читать дата-атрибут кнопки и это значение ставить в стиль body

[vittallyyaaa]

Николай, сейчас так попробую

[Ankhena]

vittallyyaaa,

Если 2 кнопки то оно либо добавляет к боди условно active либо убирает, а как так провернуть с большим количеством кнопок?

Добавлять не active, а какой-то другой класс или data-атрибут. Тот, который будет отвечать за нужную цветовую схему.
А дальше всё тоже самое.

[vittallyyaaa]

В общем, ответ был проще чем я думал, думал через toggle в js не будет работать, но все работает. Спасибо, за то что сам подумав и нашел решение

[vittallyyaaa]

вот скрипт

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

еще не стилизовал

[vittallyyaaa]

почему-то не отпрявляеться хтмл корректно, там через чекбокс реализвано

[vittallyyaaa]

только сейчас оно работет только еслинажать еще раз на активную кнопку
нужно как-то реализовать, чтобы они парралельно могли работать

[vittallyyaaa]

тоесть когда в бади добавился клас ред, чтобы при нажатии на новую кнопку, клас ред убирался, а добавлялся другой

[vittallyyaaa]

Ankhena,
только сейчас оно работет только еслинажать еще раз на активную кнопку
нужно как-то реализовать, чтобы они парралельно могли работать

тоесть когда в бади добавился клас ред, чтобы при нажатии на новую кнопку, клас ред убирался, а добавлялся другой

[vittallyyaaa]

Ankhena, код свой выше написал

[Ankhena]

vittallyyaaa, с классом могут быть проблемы, если на элементе есть ещё классы или могут быть навешаны (а они могут, особенно если это body). Поэтому вариант удалить все классы и навесить нужный не очень хорошая идея.
А значит, лучше использовать data-

У кнопок тоже прописать data-
У кнопки получить - на body навесить.
Кнопки перебирать в цикле.

[Aetae]

vittallyyaaa, что html тут не съедало заключайте код в теги <code></code>.