adding a comma to jquery counter

Question

We have an animated counter that counts up quickly to a number. We need to add a comma to the number (in the thousands) and can't figure out how (obviously we're experts).

What we have works perfectly for the counter:

(function($) {
$.fn.countTo = function(options) {
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
        increment = (options.to - options.from) / loops;

    return $(this).each(function() {
        var _this = this,
            loopCount = 0,
            value = options.from,
            interval = setInterval(updateTimer, options.refreshInterval);

        function updateTimer() {
            value += increment;
            loopCount++;
            $(_this).html(value.toFixed(options.decimals));

            if (typeof(options.onUpdate) == 'function') {
                options.onUpdate.call(_this, value);
            }

            if (loopCount >= loops) {
                clearInterval(interval);
                value = options.to;

                if (typeof(options.onComplete) == 'function') {
                    options.onComplete.call(_this, value);
                }
            }
        }
    });
};

$.fn.countTo.defaults = {
    from: 0,  // the number the element should start at
    to: 100,  // the number the element should end at
    speed: 1000,  // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 0,  // the number of decimal places to show
    onUpdate: null,  // callback method for every time the element is updated,
    onComplete: null,  // callback method for when the element finishes updating
};
})(jQuery);

jQuery(function($) {
    $('.shares').countTo({
        from: 2,
        to: 1826,
        speed: 3000,
        refreshInterval: 50,
        onComplete: function(value) {
            console.debug(this);
        }
    });
});

Any suggestions?

Here's a really good answer to that question: http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript — musicnothing, Jun 10 '13 at 07:20

score 2 · Answer 1 · answered Feb 27 '15 at 06:57

add this :

 .replace(/\B(?=(\d{3})+(?!\d))/g, ","));

to

$(_this).html(value.toFixed(options.decimals))

so your code will be like this :

function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ","));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }

I tried so many other ways that people were suggesting in other posts and none of them worked or they did not have enough info. This was so simple and elegant and works flawlessly. Great Job. — agon024, Sep 12 '15 at 18:01

score 1 · Answer 2 · answered Oct 23 '13 at 19:22

I was looking at this post, since I had the same problem with the same snippet of jQuery. Here was my really simple solution: just edit the onUpdate function to this...

onUpdate: function (value) {
    var counter= $("#counter").text();
    $("#members").text(counter.substring(0, 3)+","+counter.substring(3, 6));
}

This would only work for numbers less than 1,000,000. Otherwise you would change the .substring() parameters.

score 0 · Answer 3 · answered Jun 10 '13 at 07:24

I havent tested this, but I am sure, you will figure this out,

jQuery.i18n.formatNumber( value, format, [ options ] )Returns: String

so you will need to replace your onUpdateMethod from Null to something that has a body like

control.innerText =  jQuery.i18n.formatNumber( value, "n0")

if you want to enforce regional settings, then that can be done by passing the locale

more information here - http://www.jquerysdk.com/api/jQuery.i18n.formatNumber

Ryan Shillington · Answer 4 · 2014-04-02T19:01:16.503

I solved this problem by adding an onUpdate function, like others said, but since I didn't know the object, I discovered I could use "this" to set the inner text. Works great!

        jQuery(this).find('.milestone-count').delay(6000).countTo({
            from: 0,
            to: 100000,
            speed: 2000,
            refreshInterval: 100,
            onUpdate: function (value) {
                if(this.innerText) // firefox doesn't support innerText
                {
                    this.innerText = newVal;
                } else {
                    this.textContent = newVal;
                }
            }
        });

adding a comma to jquery counter

4 Answers4