Как мне одним кликом перекрасить все кнопки

Question

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

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

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

Answer 1

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

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');
        });
    });
});

БЛОГ НА HUSL

Как мне одним кликом перекрасить все кнопки

Ответы (1 шт):