Написал вот такой код, он при нажатии окрашивает кнопку в цвет

Question

Написал вот такой код, он при нажатии окрашивает кнопку в цвет

Front End Ученик (29), на голосовании 2 месяца назад

Но как при повторном нажатии убрать стили у кнопки и вернуть её в исходное состояние? Я знаю что надо использовать button.classList.remove('active'), но где именно прописать это?

Answer 1

Максим Искусственный Интеллект (217521) 3 месяца назад

Проверяй при клике наличие класса active. Если его нет, то добавляй, если есть, то убирай. Делается при помощи if.

Front EndУченик (29) 3 месяца назад

Никак не могу это сделать

Павел Просветленный (25834) Front End,

 button.addEventListener('click', function(){
    if(button.classList.contains('active')){
        button.classList.remove('active');
    }
    else{
        button.classList.add('active');
    }
});

До чего ты не можешь додуматься? Что в этом коде для тебя сложного?

Answer 2

Витя Мыслитель (6572) 3 месяца назад

Здесь же в этом же событии

Answer 3

 const button = document.createElement('button') 
button.textContent = 'Нажать' 
 
button.addEventListener('click', () => { 
 button.classList.toggle('active') 
}) 
 
document.body.append(button)

Answer 4

Ну как? Сейчас ты просто добавляешь класс при каждом нажатии, не смотря на то, есть там этот класс или нет. То есть первый клик решающий а все последующие бесполезны.
Для того чтобы удалять/добавлять класс, при каждом клике тебе надо узнать есть ли там этот класс или нет. Это простейший if - else.
Если класс присутствует - удаляем. Отсутствует - добавляем.
Для проверки можно то же свойство classList использовать. А точнее classList.contains().

Если быть ещё проще, то достаточно одного метода classList.toggle().

 button.addEventListener('click', () => button.classList.toggle('active'));

Но тебе явно надо знать первый вариант. Подходящие методы всегда можно найти в документации, но логику ты должен понимать самостоятельно.