счетчик имени класса не работает в JavaScript

Question

я создаю счетчик.

dk = parseInt(document.querySelector('.dm').innerText);
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      document.querySelector('.dm').innerText = i;
    }, i * 100);
  })(i);
}
console.log(dk);

.counter { display: flex; }

.dm {
  background: tomato;
  padding: 15px;
  font-size: 5em;
  font-weight: 700;
  width: 100px;
  height: auto;
  text-align: center;
  margin: 0 2px;
}

<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>

проблема в том, что работает только первый счетчик div.мы можем разобрать элемент innerHTMl по html dom как classname ... я пытаюсь, но результат равен Nan .Я хочу запустить все счетчики, если я добавлю одно и то же имя класса с разными внутренними значениями.

Answer 1

Ваша проблема в том, что вы используете document.querySelector().

Когда вы используете document.querySelector('.dm'), он вернет только первый элемент, соответствующий этому селектору, вам нужно использовать document.querySelectorAll('.dm')чтобы получить все соответствующие элементы.

Но с несколькими элементами вам понадобится цикл, чтобы сделать это, потому что querySelectorAll() вернет nodeList, чтоколлекция (array).

Вот как должен быть ваш код:

var elements = document.querySelectorAll('.dm');
Array.from(elements).forEach(function(el, ind){
let dk = parseInt(elements[ind].innerText)
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      elements[ind].innerText = i;
    }, i * 100);
  })(i);
}
});

Демо:

var elements = document.querySelectorAll('.dm');
Array.from(elements).forEach(function(el, ind){
let dk = parseInt(elements[ind].innerText)
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      elements[ind].innerText = i;
    }, i * 100);
  })(i);
}
});

.counter { display: flex; }

.dm {
  background: tomato;
  padding: 15px;
  font-size: 5em;
  font-weight: 700;
  width: 100px;
  height: auto;
  text-align: center;
  margin: 0 2px;
}

<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>

Answer 2

Ваш вопрос не очень понятен, но если я правильно понял, вы хотите, чтобы оба таймера работали одновременно, верно?

Если это так, то приведенный ниже код должен помочь.

ИспользуйтеquerySelectorAll(), чтобы получить все элементы с одинаковым классом, затем прокрутите их, чтобы получить значение и увеличить его, как вы делали.

const dms = document.querySelectorAll('.dm');

for (let j = 0; j < dms.length; j++){
  let dk = dms[j].innerText;
  
  for(let i = 0; i <= dk; i++){
      setTimeout(function() { 		
        dms[j].innerText = i; 
      }, i * 100);
  }
  console.log(dk);  
}

.counter{
  display: flex;
}

.dm {
    background: tomato;
    padding: 15px;
    font-size: 5em;
    font-weight: 700;
    width: 100px;
    height: auto;
    text-align: center;
    margin: 0 2px;
}

<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>