How to add comma to separate numbers - JavaScript

Man Down

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">4div>
div>
<div class="col-block stats__col">
<div class="stats__count">40div>
div>
<div class="col-block stats__col">
<div class="stats__count">170607div>
div>
<div class="col-block stats__col">
<div class="stats__count">3447div>
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%"
});
};

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Man Down8y ago
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] : "");
    }
0
Man Down8y ago
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%"

    });
};
+1
Altaf Ansari8y ago
Assign value in .text
$this.text(v_pound);
+1
Man Down8y ago
I also remove math.ceil() ,but still same problem number and comma working but not animate :(
+1
Man Down8y ago
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 ?!
+1
Altaf Ansari8y ago
ok then Remove :
Math.ceil()
+1
Man Down8y ago
@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%"

    });
};
+1
Altaf Ansari8y ago
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] : "");
    }
+1