Как сбросить цвет?

Question

[Артур Левенсон]

Подскажите, как сделать так, чтобы по клику на .reset цвета сбрасывались. мне нужно убрать дополнительный класс active по нажатию на reset

пример кода https://codepen.io/kiskiskit/pen/MWmypaB

Answer 1

[Александр]

const button = document.querySelector('.reset');
button.addEventListener('click', () => {
    document.querySelectorAll('.active').forEach(element => element.classList.remove('active'));
});

ну и <div class="reset">сброс цвета</div> заменить на

<button type="button" class="reset">сброс цвета</button>

Comments

[Артур Левенсон]

спасибо

[Артур Левенсон]

подскажите, что нужно сделать, если на странице есть 2 кнопки с классом reset. у меня получилось реализовать только одну кнопку, а вот со второй почему-то не работает. как быть ?

[Александр]

Артур Левенсон, Покажите разметку.

[Артур Левенсон]

Александр, https://codepen.io/kiskiskit/pen/MWmypaB

[Александр]

const removeActive = target => {
  if (target !== null) {
    target.querySelectorAll('.active').forEach(element => element.classList.remove('active'));
  }
};

document.querySelectorAll('.list .test').forEach(item => {
  item.addEventListener('click', () => {
    removeActive(item.closest('.list'));
    item.classList.add('active');
  });
});

document.querySelectorAll('.reset').forEach(button => {
  button.addEventListener('click', () => removeActive(button.closest('.list')));
});

Answer 2

[Pavlo Marchenko]

const list = document.querySelectorAll('.list .test')
window.addEventListener('click', (e)=> {
  const target = e.target;
  if(target.classList.contains('test')){
    resetActiveItem()
    target.classList.add('active')
  }
  
   if(target.classList.contains('reset')) {
     resetActiveItem()
   }
})
function resetActiveItem() {
  list.forEach(item=>item.classList.remove('active'));
}

Comments

[Артур Левенсон]

спасибо