Как обрабатывать событие на всех элементах, имеющих определённый класс?

Question

[doctor__23]

Есть несколько блоков с рейтингом, который можно выбрать с помощью input[type="range"], скриптом подставляются звезды, закрашенная и не закрашенная (в зависимости от того, что выбрано). Обращаюсь к элементам через querySelector, поэтому обработчик события вешается только на первый элемент. При обращении к элементам через querySelectorAll вообще не вешается обработчик события ни на один элемент, в чем проблема?

Answer 1

[0xD34F]

Делегирование, назначаем обработчик события один раз для всех:

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('rating__value')) {
    const value = +t.value;

    t.closest('.item-rating').querySelector('.rating__dynamic').innerHTML = Array
      .from({ length: 5 }, (n, i) => `<span class="char">${'☆★'[+(value > i)]}</span>`)
      .join('');
  }
});

document.querySelectorAll('.rating__value').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});

Или, каждому элементу индивидуально:

for (const n of document.getElementsByClassName('rating__value')) {
  n.previousElementSibling.innerHTML = '<span class="char"></span>'.repeat(5);
  n.addEventListener('input', onRatingInput);
  onRatingInput.call(n);
}

function onRatingInput() {
  const value = this.value | 0;
  const stars = this.previousElementSibling.children;

  for (let i = 0; i < stars.length; i++) {
    stars[i].innerText = value > i ? '★' : '☆';
  }
}

Comments

[doctor__23]

Спасибо, большое, этот вариант мне даже больше нравится, чем мой))