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: stackoverflow.com/questions/2901102/… — Steve Kline
– Steve Kline, Commented Jun 2, 2016 at 2:42
@SteveKline if you please read the question, I already have the feature however I'm having problems implementing it into another. — Tyler
– Tyler, Commented Jun 2, 2016 at 2:45

jfriend00 · Accepted Answer · 2016-06-02 02:42:33Z

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 2, 2016 at 2:42

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tyler Over a year ago

Can I not all .digits(); from within $.fn.countTo?

jfriend00 Over a year ago

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.

Tyler Over a year ago

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

jfriend00 Over a year ago

@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.

jfriend00 Over a year ago

@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.

|

Collectives™ on Stack Overflow

Problems Adding Commas To Numbers

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related