Tengo muchos divs que contienen un atributo de datos con un valor diferente para cada uno
Intento imprimir este valor contando usando 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); <div class="skill-level position-absolute"> <div class="outer"> <div class="inner d-flex align-items-center justify-content-center"> <div class="number" data-num="95"> </div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px"> <defs> <linearGradient id="GradientColor"> <stop offset="0%" stop-color="#e91e63" /> <stop offset="100%" stop-color="#673ab7" /> </linearGradient> </defs> <circle cx="80" cy="80" r="70" stroke-linecap="round" /> </svg> </div> <div class="skill-level position-absolute"> <div class="outer"> <div class="inner d-flex align-items-center justify-content-center"> <div class="number" data-num="70"> </div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px"> <defs> <linearGradient id="GradientColor"> <stop offset="0%" stop-color="#e91e63" /> <stop offset="100%" stop-color="#673ab7" /> </linearGradient> </defs> <circle cx="80" cy="80" r="70" stroke-linecap="round" /> </svg> </div>El problema es que el contador no se detiene en el valor del número de datos, cuenta hasta el infinito.
¿Cómo puedo detener el contador para cada uno en el valor de data-num para cada div?
Lo que sucede es que ambos elementos hacen referencia a la misma variable counter , por lo que la variable en realidad se incrementa en dos cada llamada de la función. Por lo tanto, debe tener contadores para cada número. Del mismo modo, debe tener intervalos para cada número para saber cuándo dejar de incrementar.
Además, debe reemplazar number.dataset.num con parseInt(number.dataset.num) porque ese atributo es en realidad una cadena. Como dijo Parsa S, también debe usar clases en lugar de id. Después de implementar todos los cambios, aquí está el código:
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) }); 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); }); <div class="skill-level position-absolute"> <div class="outer"> <div class="inner d-flex align-items-center justify-content-center"> <div id="number" data-num="95"> </div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px"> <defs> <linearGradient id="GradientColor"> <stop offset="0%" stop-color="#e91e63" /> <stop offset="100%" stop-color="#673ab7" /> </linearGradient> </defs> <circle cx="80" cy="80" r="70" stroke-linecap="round" /> </svg> </div> <div class="skill-level position-absolute"> <div class="outer"> <div class="inner d-flex align-items-center justify-content-center"> <div id="number" data-num="70"> </div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px"> <defs> <linearGradient id="GradientColor"> <stop offset="0%" stop-color="#e91e63" /> <stop offset="100%" stop-color="#673ab7" /> </linearGradient> </defs> <circle cx="80" cy="80" r="70" stroke-linecap="round" /> </svg> </div>>= parseInt(number.dataset.num) condición de uso.setInterval() uso dentro del bucle forEach() .clearInterval(intervalId); establecer intervalId como argumento.¡No puedes usar id para seleccionar todos los mismos divs! ¡La identificación debe ser única! si desea seleccionar divs, debe usar la clase
<div class="number"> </div>el selector siempre selecciona el último elemento cuando tienen la misma identificación