How to add comma to separate numbers - JavaScript

Question

I am trying to print an number in JavaScript with commas as separators. but when i add comma it will give me Nan value For example, I want to show the number 170607 as "170,607". How would I go about doing this? HTML : div class = "row about-stats stats block-1-4 block-m-1-2 block-mob-full" data-aos = "fade-up" > div class = "col-block stats__col " > div class = "stats__count" > 4 div > div > div class = "col-block stats__col" > div class = "stats__count" > 40 div > div > div class = "col-block stats__col" > div class = "stats__count" > 170607 div > div > div class = "col-block stats__col" > div class = "stats__count" > 3447 div > div > div > Script: /* Stat Counter * ------------------------------------------------------ */ var clStatCount = function() { var statSection = $( ".about-stats" ), stats = $( ".stats__count" ); statSection.waypoint({ handler: function(direction) { if (direction === "down" ) { stats.each(function () { var $ this = $( this ); $({ Counter: 0 }).animate({ Counter: $ this .text() }, { duration: 4000, easing: 'swing' , step: function (curValue) { $ this .text(Math.ceil(curValue)); } }); }); } // trigger once only this .destroy(); }, offset: "90%" }); };

Man Down · Answer

Find out also with animate , and now everything working : var clStatCount = function () { var statSection = $( ".about-stats" ), stats = $( ".stats__count" ); statSection.waypoint({ handler: function (direction) { if (direction === "down" ) { stats.each(function () { var $ this = $( this ); $({ Counter: 0 }).animate({ Counter: $ this .text() }, { duration: 4000, easing: 'swing' , step: function (curValue) { var num = numberWithCommas(curValue); $ this .text(numberWithCommas(Math.round( this .Counter))); } }); }); } // trigger once only this .destroy(); }, offset: "90%" }); }; function numberWithCommas(n) { var parts = n.toString().split( "." ); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "," ) + (parts[1] ? "." + parts[1] : "" ); }

Man Down · Answer

sorry im be pain , i just trying solv the issue , this is compelete code , but its not working , i can see numbers with comma , but the animate its not working , and how animate working ,when refresh page it will count the nummbers ,where i can see it . var clStatCount = function() { var statSection = $( ".about-stats" ), stats = $( ".stats__count" ); function numberWithCommas(x) { return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, "," ); } statSection.waypoint({ handler: function(direction) { if (direction === "down" ) { stats.each(function () { var v_pound = $( this ).html(); v_pound = numberWithCommas(v_pound); $( this ).html(v_pound) $({ Counter: 0 }).animate({ Counter: $ this .text() }, { duration: 4000, easing: 'swing' , step: function (curValue) { $ this .text(v_pound); } }); }); } // trigger once only this .destroy(); }, offset: "90%" }); };

Altaf Ansari · Answer

Assign value in .text $ this .text(v_pound);

Man Down · Answer

I also remove math.ceil() ,but still same problem number and comma working but not animate :(

Man Down · Answer

Altaf : the soulation i just post mintus ago , its working and it will add comma , but im losing my animate counting , how can i solv this ?!

Altaf Ansari · Answer

ok then Remove : Math.ceil()

Man Down · Answer

@Altaf: i tried but i get Nun value , but i get it work in other way , maybe its help some one : var clStatCount = function() { var statSection = $( ".about-stats" ), stats = $( ".stats__count" ); function numberWithCommas(x) { return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, "," ); } statSection.waypoint({ handler: function(direction) { if (direction === "down" ) { stats.each(function () { var v_pound = $( this ).html(); v_pound = numberWithCommas(v_pound); $( this ).html(v_pound) $({ Counter: 0 }).animate({ Counter: $ this .text() }, { duration: 4000, easing: 'swing' , step: function (curValue) { $ this .text(Math.ceil(curValue)); } }); }); } // trigger once only this .destroy(); }, offset: "90%" }); };

Altaf Ansari · Answer

Try this: var clStatCount = function () { var statSection = $( ".about-stats" ), stats = $( ".stats__count" ); statSection.waypoint({ handler: function (direction) { if (direction === "down" ) { stats.each( function () { var $ this = $( this ); $({ Counter: 0 }).animate({ Counter: $ this .text() }, { duration: 4000, easing: 'swing' , step: function (curValue) { var num = numberWithCommas(curValue); $ this .text(Math.ceil(num)); } }); }); } // trigger once only this .destroy(); }, offset: "90%" }); }; function numberWithCommas(n) { var parts = n.toString().split( "." ); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "," ) + (parts[1] ? "." + parts[1] : "" ); }