Как использовать значения Data-Num HTML атрибута в JavaScript

Question

Я хочу, чтобы числа увеличивались для задач в HTML (data-num = "").Но мой код работает только для одного data-num.Второе число не меняется.Как изменить несколько номеров одновременно?

var number = document.querySelector('.numbers'),
  numberTop = number.getBoundingClientRect().top,
  start = 0,
  end = number.dataset.num;

window.addEventListener('scroll', function onScroll() {
  if (window.pageYOffset > numberTop - window.innerHeight / 2) {
    this.removeEventListener('scroll', onScroll);
    var interval = setInterval(function() {
      number.innerHTML = ++start;
      if (start == end) {
        clearInterval(interval);
      }
    }, 5);
  }
});

html {
  height: 1000px;
}

<p data-num="548" class="numbers">0</p>
<p data-num="548" class="numbers">0</p>

Answer 1

Проблема в том, что вы ссылаетесь только на первый элемент, даже если запрашиваете селектор класса.Вы должны сделать свой цикл цикла через массив элементов.

Попробуйте это

var number = document.querySelectorAll('.numbers'),
  numberTop = number[0].getBoundingClientRect().top,
  start = 0,
  end = number[0].dataset.num;

window.addEventListener('scroll', function onScroll() {
  if (window.pageYOffset > numberTop - window.innerHeight / 2) {
    this.removeEventListener('scroll', onScroll);
    var interval = setInterval(function() {
      ++start;
      number.forEach( (item,index) => (item.innerHTML = start));
      if (start == end) {
        clearInterval(interval);
      }
    }, 5);

  }
});