I want to start from 0. Until it reaches the numbers 709 and 54, Stop it.
HTML
<span class="card-title h5 counter"> 709 + </span>
<span class="card-title h5 counter"> 54+ </span>
script.js
let intervals = [];
let counter = [];
let elements = document.getElementsByClassName('counter');
Array.from(elements).forEach((element, index) => {
counter[index] = 0;
intervals[index] = setInterval(()=> {
counter[index]++;
element.innerText=counter;
}
, 50);
})
But this code goes on indefinitely and does not end.
this way...
use the same setInterval for both, and clear it when there is no more counter to increment.
const elements = [...document.querySelectorAll('.counter')].map(el=>({el,counter:parseInt(el.textContent), val:-1}))
let intervalReference = setInterval(() =>
{
let endingCount = 0
elements.forEach(refs =>
{
if ( refs.val < refs.counter)
refs.el.textContent = ` ${++refs.val} + `
else
++endingCount
})
if (endingCount===elements.length) clearInterval(intervalReference)
}, 50) <span class="card-title h5 counter"> 709 + </span>
<span class="card-title h5 counter"> 54+ </span>You can also do it in two separate setInterval() calls. Each one is defined within their own scope. This way there is no need to set up arrays for storing the values and references outside the scope:
[...document.querySelectorAll('.counter')]
.forEach(e=>{ let i=0;
const n=parseInt(e.textContent),
h=setInterval(()=>{
if(i<n) e.textContent=++i +" + ";
else clearInterval(h);
},20)
});<span class="card-title h5 counter"> 709 + </span>
<span class="card-title h5 counter"> 54 + </span>