Есть 10 кнопок и как повесить на них функции?

Question

[yapaofficial]

есть 10 кнопок и надо сделать чтобы при нажати на них сработала какаято штука

var asd = document.querySelectorAll('.services__buy');

asd .addEventListener('click', () => {
  scrollTo(div_aboutMe);
})

но если кнопок больше одной то этот код ломается как поченить?

Answer 1

[Сергей delphinpro]

asd - это коллекция элементов. нужно циклом пройтись по ней и на каждый навесить обработчик

asd.forEach(el => {
  el.addEventListener('click', () => {
    // ....
  });
})

Answer 2

[otdameskapizm]

Пройдись по всем через forEach():

asd.forEach((element) => {
  element.addEventListener('click', () => {
    // И здесь уже дальнейшая логика
  })
})

А если каждая кнопка отвечает за разные действия, то можно повесить обработчик на их родительский элемент и уже потом делать диспетчеризацию по event.target. Но это уже зависит от вашего конкретного процесса.

Answer 3

[Сергей Соколов]

как вариант, можно слушать клики где-то выше, на общем родителе их всех, или вообще на document:

document.addEventListener('click', ({ target }) => {
  if (target.classList.contains('services__buy')) {
    // do something
  }
});

Comments

[blablacarer]

лучшая практика из предложенных