I'm using a script to animate four sets of numbers on a page. I would like the numbers to be editable from within the admin (a SuperTable field).
Currently I have this:
<ul class="counters">
{% for stats in entry.statsPanels %}
<li><span id="tal-{{ loop.index0 }}" class="tal">0</span>{{ stats.statDescription }}</li>
{% endfor %}
</ul>
Which is working fine for looping through and pulling back the 'Stat Descriptions'.
Somehow I also need to loop through the 'Stats Number' column and embed this into the JavaScript that animates the numbers... at the moment they're hard coded '400, 60, 1800, 40'.
$(document).ready(function(){
function numberWithCommas(n) {
var parts=n.toString().split(".");
return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
var endingCounterVar = [400, 60, 1800, 40];
for (let i = 0; i <= 3; i++) {
let counter = { var: 0 };
let tal = document.getElementById("tal-"+i);
TweenMax.to(counter, 5, {
var: endingCounterVar[i],
onUpdate: function () {
let nwc = numberWithCommas(counter.var);
tal.innerHTML = nwc;
},
ease:Circ.easeOut
});
}
});
Any help is very much appreciated.
Thank you
Martin