0

У меня есть 3 кнопки мне с помощью JS нужно при клике на одну из них перекрасить все. Я задал переменную

const btn = document.querySelectorAll('button');

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

1
  • дак при клике дай им elem.classList.add('classname) 9 июл 2022 в 5:28

1 ответ 1

0

Я разобрался. Для начала нужно объявить кнопки:

const btns = document.querySelectorAll('button');

После этого, мы не можем повесить для btns обработчик событий, ведь получился псевдомассив. Мы должны его перебрать и поместить в него addEventListener

btns.forEach(item => {
    item.addEventListener('click', () => {
    
    });
});

Нам нужно чтобы при клике на любой элемент, мы заново перебрали btns чтобы уже задать стили для каждого элемента. То есть при клике на любой элемент, мы должны применить что-то для каждого:

btns.forEach(item => {
    item.addEventListener('click', () => {
        btns.forEach(i => {
            i.style.background = 'blue';
        });
    });
});

Теперь при клике на любую кнопку, все кнопки красятся. Если же вы хотите что при повторном клике всё возвращалось обратно, то я реализовал эту структуру через ClassList

CSS:

.blue {
    background-color: blue;
}

JS:

const btns = document.querySelectorAll('button');

btns.forEach(item => {
    item.addEventListener('click', () => {
        btns.forEach(i => {
            i.classList.toggle('blue');
        });
    });
});


3
  • Структуру через classList?...
    – ΝNL993
    9 июл 2022 в 6:54
  • @ΝNL993 о какой структуре ты говоришь 9 июл 2022 в 8:30
  • @AndreyFreiz в тексте написано: то я реализовал эту структуру через ClassList.
    – ΝNL993
    9 июл 2022 в 15:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.