stop counter on data attribute for multiple values

Question

I have many divs that contain an data-attribute with a different value for each

I try to print this value by counting using javascript

const numbers = document.querySelectorAll(".number");
console.log(numbers);
let counter = 0;
setInterval(() => {
 numbers.forEach((number) => {
        if(counter === number.dataset.num){
            clearInterval();
        }else{
            counter += 1;
            number.innerHTML = counter + "%";
        }
    })
}, 20);

The problem is that the counter doesn't stop on the data-num value it counts to infinity

How can i stop the counter for each one in the value of data-num for each div?

user_14044086 · Answer

What's happening is that both elements are referencing the same variable counter, so the variable is actually incremented by two every call of the function. Therefore, you should have counters for each number. Likewise, you should have intervals for each number so you know when to stop incrementing.

Also, you need to replace number.dataset.num with parseInt(number.dataset.num) because that attribute is actually a string. As Parsa S said, you should also use classes instead of ids. After implementing all of the changes, here is the code:

const numbers = document.querySelectorAll(".number"); // Change the HTML to use classes
const counters = Array(numbers.length);
const intervals = Array(numbers.length);
counters.fill(0);

numbers.forEach((number, index) => {
  intervals[index] = setInterval(() => {
    if (counters[index] === parseInt(number.dataset.num)) {
      clearInterval(intervals[index]);
    } else {
      counters[index] += 1;
      number.innerHTML = counters[index] + "%";
    }
  }, 20)
});

user_17189011 · Answer

const numbers = document.querySelectorAll("#number");
let counter = 0;
 numbers.forEach((number) => {
let myIntervalCounter = setInterval(() => {
        if(counter >= parseInt(number.dataset.num)){
            clearInterval(myIntervalCounter);
        }else{
            counter += 1;
            number.innerHTML = counter + "%";
        }
}, 20);
    });

>= parseInt(number.dataset.num) use condition.
setInterval() use in inside of forEach() loop.
clearInterval(intervalId); set intervalId as argument.

user_14970135 · Answer

you can't use id to select all same divs! the id must be unique! if you want to select divs you must use class

selector always select last element when they have same id

stop counter on data attribute for multiple values

3 Answers