Написал вот такой код, он при нажатии окрашивает кнопку в цвет
Но как при повторном нажатии убрать стили у кнопки и вернуть её в исходное состояние? Я знаю что надо использовать button.classList.remove('active'), но где именно прописать это?
const button = document.createElement('button')
button.textContent = 'Нажать'
button.addEventListener('click', () => {
button.classList.toggle('active')
})
document.body.append(button) Ну как? Сейчас ты просто добавляешь класс при каждом нажатии, не смотря на то, есть там этот класс или нет. То есть первый клик решающий а все последующие бесполезны.
Для того чтобы удалять/добавлять класс, при каждом клике тебе надо узнать есть ли там этот класс или нет. Это простейший if - else.
Если класс присутствует - удаляем. Отсутствует - добавляем.
Для проверки можно то же свойство classList использовать. А точнее classList.contains().
Если быть ещё проще, то достаточно одного метода classList.toggle().
button.addEventListener('click', () => button.classList.toggle('active')); Но тебе явно надо знать первый вариант. Подходящие методы всегда можно найти в документации, но логику ты должен понимать самостоятельно.
Здесь же в этом же событии
Проверяй при клике наличие класса active. Если его нет, то добавляй, если есть, то убирай. Делается при помощи if.