Переключатель для всех кнопок

Question

Всем привет ! Сделала переключатель состояния кнопки с помощью JS. Но оно работает почему-то только для первой кнопки, а для остальных нет. Пробовала перебирать let gardenButtons с помощью forEach и далее запускать функцию с toggle, но где-то допускаю ошибку и ничего не получается. Помогите пожалуйста.

<div class="button-block-about">
  <form action="#">
    <button class="service-butt" id="0">Gardens</button>
  </form>
  <form action="#">
    <button class="service-butt" id="1">Lawn</button>
  </form>
  <form action="#">
    <button class="service-butt" id="2">Planting</button>
  </form>
</div

.service-butt{
  background-color: transparent;
}
    
.serviceButtAct{
  background-color: green;
}

let gardenButtons = document.querySelector('.service-butt');
    
let handleClick = (event) => {
  gardenButtons.classList.toggle('serviceButtAct')
}
    
gardenButtons.addEventListener('click', handleClick)

Answer 1

Вам нужен не querySelector, а querySelectorAll. Так вы получите коллекцию узлов по заданному селектору. Потом с помощью цикла нужно пройтись по коллекции через .forEach (подобно массиву) и навесить слушатели событий:

const gardenButtons = document.querySelectorAll('.service-butt');
gardenButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('serviceButtAct');
  })
})

К слову, лучше используйте const вместо let, если значение не меняется.

БЛОГ НА HUSL

Переключатель для всех кнопок

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