Styjun

I have a working number counter section on a site I'm working on and I don't know much JS, I have some code that works but it breaks the front-end and stops the counter. I'm hoping someone can help me understand how to put the pieces I have together correctly.

I've tried both the functions separately and together, probably incorrectly. The second function which deals with the thousand comma works, however it kicks out the front end and the counting function.

I'm not sure what happened with the #shiva element, but I've replaced this overall with #counter as the function works across the board rather than one div element only. I've left both in just now in case theres another way.

HTML:

<div id="counter">
 <div class="row">
 <div class="col span-1-of-2">
 <div class="row">
 <div id="shiva"><span class="count">1688019</span></div>
 <h2>Text</h2>
 </div>

 <div class="row">
 <div id="shiva"><span class="count">82150</span></div>
 <h2>Text</h2>
 </div>
 </div>

 <div class="col span-1-of-2">
 <div class="row">
 <div id="shiva"><span class="count">10505</span></div>
 <h2>Text</h2>
 </div>

 <div class="row">
 <div id="shiva"><span class="count">168260</span></div>
 <h2>Text</h2>
 </div>

 </div>
 </div>
 </div>

Counter:

$('.count').each(function () 
 $(this).prop('Counter', 0).animate(
 Counter: $(this).text()
 , 
 duration: 2000,
 easing: 'swing',
 step: function (now) 
 $(this).text(Math.ceil(now));
 
 );
);

Separator:

 function numberWithCommas(number) 
 var parts = number.toString().split('.');
 parts[0] = parts[0].replace(/B(?=(d3)+(?!d))/g, ',');
 return parts.join('.');


$('#counter').each(function () 
 var num = $(this).text();
 var commaNum = numberWithCommas(num);
 $(this).text(commaNum);
);

Someone answered using a similar example to comma by thousands, you just had to adapt it for your situation. Read here How to print a number with commas as thousands separators in JavaScript

The counter you need to replace it after it animates,

 $('.count').each(function () 
 $(this).prop('Counter', 0).animate(
 Counter: $(this).text()
 , 
 duration: 2000,
 easing: 'swing',
 step: function (now) 
 $(this).text(Math.ceil(now));
 $(this).text(convert($(this).text()))
 
 );
 );

Steps:

• Loop through each .count element


• Replace each .count number by our functions return result


• Our function uses regexp to format the string, combining and joining


• Set the value in .count to our new result

Example

 

 const convert = str => $))/;
 // Set a variable
 let currStr;
 // Start loop
 do str.split(`.`)[0])
 .replace(regx, `$1,$2`)
 while (currStr.match(regx)); // Loop

 // Return our result from function
 return (str.split(`.`)[1]) ?
 currStr.concat(`.`, str.split(`.`)[1]) :
 currStr;
 ;


 function total() 
 let total = 0;
 $('.count').each(function() 
 let v = parseInt($(this).text());
 total = v + total
 )
 return total;
 

 $('.count').each(function () 
 $(this).prop('Counter', 0).animate(
 Counter: $(this).text()
 , 
 duration: 2000,
 easing: 'swing',
 step: function (now) 
 $(this).text(Math.ceil(now));
 $(this).text(convert($(this).text()))
 
 );
 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">
 <div class="row">
 <div class="col span-1-of-2">
 <div class="row">
 <div id="shiva"><span class="count">1688019</span></div>
 <h2>Text</h2>
 </div>

 <div class="row">
 <div id="shiva"><span class="count">82150</span></div>
 <h2>Text</h2>
 </div>
 </div>

 <div class="col span-1-of-2">
 <div class="row">
 <div id="shiva"><span class="count">10505</span></div>
 <h2>Text</h2>
 </div>

 <div class="row">
 <div id="shiva"><span class="count">168260</span></div>
 <h2>Text</h2>
 </div>

 </div>
 </div>
</div>