Problems Adding Commas To Numbers

Question

I have implemented a comma for the roundNum of which I display the total which is being moved;

    $.fn.digits = function(){ 
        return this.each(function(){ 
            $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
        });
    };

$('.total').text(roundNum).digits();

However I cannot seem to do the same to the actual counter.

$.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
};


$('.timer').countTo({
    from: 0,
    to: roundNum,
    speed: speed,
    refreshInterval: 600,
    onComplete: function() {
        console.debug(this);
    }
});

This question was already answered on this thread: http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript — Steve Kline, Jun 02 '16 at 02:42
@SteveKline if you please read the question, I already have the feature however I'm having problems implementing it into another. — Tyler, Jun 02 '16 at 02:45

score 1 · Accepted Answer · answered Jun 02 '16 at 02:42

1

An issue is that this:

$('.total').text(roundNum)

returns a string. So, when you then try to add .digits() onto the end of it:

$('.total').text(roundNum).digits();

It's looking for a .digits() method on a string, not on a jQuery object because that's what $('.total').text(roundNum) returns.

There are several possible ways to go, depending upon how you want this to work. Probably what makes the most sense is to just make your digits() code into a plain function that accepts an incoming number or string and returns a comma-fied string so you can just do this:

$('.total').text(digits(roundNum));

answered Jun 02 '16 at 02:42

jfriend00

683,504
96
985
979

Can I not all `.digits();` from within `$.fn.countTo`? – Tyler Jun 02 '16 at 02:48
When you call `obj.method()`, you have to be calling a method that belongs to the type of object you have and it has to be an object that has the right instance data to operate on. So, when you ask if you can call `.digits()` from within sure you can if you call it properly, but unless `.digits()` is going to operate on a DOM element, there's no point in it being a jQuery method. A jQuery object contains a list of DOM elements, so jQuery methods should be methods that operate on that list of DOM elements directly.You could make `.digits()` work that way, but that doesn't seem to fit well here. – jfriend00 Jun 02 '16 at 02:54
Ah, I think I got you. So I would be best going into the function and using `.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")` _somewhere_ I just need to now figure out _where_ – Tyler Jun 02 '16 at 03:27
@TimMarshall - That's not what I said. I would suggest you make a reusable function that adds commas to a string and returns a new string and then you can use that function anywhere you want. Here's an example: [Format numbers in Javascript](http://stackoverflow.com/questions/1068284/format-numbers-in-javascript/7125034#7125034). – jfriend00 Jun 02 '16 at 03:29
Sorry, I'm recently trying to push my limits, I thoguth `$.fn.digits = function(){ ` was reuseable anywhere... _reading link now_ – Tyler Jun 02 '16 at 03:32
1

@TimMarshall - That's reusable only as a method of a jQuery object. I'm suggesting a plain function that can be used anywhere since there's absolutely no connection at all to jQuery when you just want to add commas to a string. Make a plain function that can be used anywhere with or without jQuery around. That other link shows you a plain function named `addCommas()` that works that way. It's a bit more sophisticated because it handles decimals and +/- signs too. – jfriend00 Jun 02 '16 at 03:34
Got it working, actually simpler than what I thought it would be. Thank you very much for your help :) – Tyler Jun 02 '16 at 03:41

Problems Adding Commas To Numbers

1 Answers1