Я разобрался. Для начала нужно объявить кнопки:
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');
});
});
});