CODEWITHSUNDEEP
javascripthtmlcssloopsdom
Kishor Admane
Kishor Admane

Reputation: 69

by class name counter not work in javascript

i create a counter.

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>

problem is only first div counter is working. can we parse element of innerHTMl by html dom like classname...i try but result is Nan. i want run all counter if i add same classname with different inner values.

Upvotes: 2

Views: 225

Answers (2)

cнŝdk
cнŝdk

Reputation: 32145

Your problem is that you are using document.querySelector().

When you use document.querySelector('.dm') it will return only the first element matching this selector, you need to use document.querySelectorAll('.dm') to get all the matching elements.

But with multiple elements you will need a loop to do that, because querySelectorAll() will return a nodeList which is a collection(array).

This is how should be your code:

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);
}
});

Demo:

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>

Upvotes: 6

Calvin Nunes
Calvin Nunes

Reputation: 6516

Your question is not very clear, but if I understood correctly, you want both timer to run simultaneous, right?

If so, then the code below should help.

Use the querySelectorAll() to get all elements with same class, then loop through them to get the value and make it increase like you was doing.

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>

Upvotes: 1

Related Questions