How to add Counter on multiple text

Question

I have a multiple Pie chart that has text inside it to show the percentage and I want to animate it. below code increment, the count until the number reaches to hundred.

var text = document.querySelectorAll('text');
var duration = setInterval(count, 14);
var c = 0;
function count(){
    for (var i = 0; i < text.length; i++) {
       if(c == 101){
            clearInterval(time);
       }else {
           text[i].textContent = c + '%';
       }
    }
    c++;
}

but i want to have different text/number on each item. i tried below code but the number jumps from 0 to the value that i specified.

var text = document.querySelectorAll('text');
var duration = setInterval(count, 14);
var c = 0;
function count(){
    for (var i = 0; i < text.length; i++) {
       if(c == 82){
           text[0].textContent = c + '%';
       }else if(c == 46){
           text[1].textContent = c + '%';
       }else if(c == 76){
           text[2].textContent = c + '%';
       }else if(c == 56){
           text[3].textContent = c + '%';
       }else if(c == 26){
           text[4].textContent = c + '%';
       }else if(c == 96){
           text[5].textContent = c + '%';
       }
    }
    c++;

}
setInterval(count, 14);

Answer 1

You dont need for statement as you are accessing all elements manually and you want numbers to change while their value is smaller than target:

function count(){
       if(c <= 82)
           text[0].textContent = c + '%';
       if(c <= 46)
           text[1].textContent = c + '%';
       if(c <= 76)
           text[2].textContent = c + '%';
       if(c <= 56)
           text[3].textContent = c + '%';
       if(c <= 26)
           text[4].textContent = c + '%';

//after reaching to highest number you need to stop the clock

       if(c <= 96)
           text[5].textContent = c + '%'
       else 
           clearInterval(time);

    c++;
}