Animated number counter not adding commas

Question

I have a number counter that counts from 0 to a specified value. Currently it works to the fixed decimal point, but it won't add the commas in if the value is over 1,000 (for example if i type 10000 i should expect 10,000 but it currently returns 10000.00).

Could anyone help me out with this? I have supplied my full function that does this however the only part that runs the animation is detailed in the comments starting with //ANIMATION STARTS HERE.

Thank you in advance!

numbersAnimate(_Panel) {

    if (!_Panel) {
      return;
    }

    const _Document = document.documentElement;
    let lang = _Document.getAttribute('lang');

    const _PanelAmounts = _Panel.querySelectorAll('.panel__amount');
    if (!_PanelAmounts) {
      return;
    }

    for (const _PanelAmount of _PanelAmounts) {

      const $PanelAmount = $(_PanelAmount);

      const value = $PanelAmount.data('amount');

      if (!value || value.length < 1) {
        return;
      }

      if (isNaN(value)) {
        return;
      }



      //ANIMATION STARTS HERE....
      $PanelAmount.prop('Counter', 0).animate({
        Counter: value
      }, {
        duration: 1000,
        easing: 'linear',
        step: function(now) {
          $PanelAmount.text(this.Counter.toFixed(2));
        }
      });

    }

    _Panel.classList.add('animated');





    //JSON Structure

    "statistic": {
      "amount": "10000",
      "symbol": "%"
    },

<span className="panel__amount panel-text-style-c" data-amount={jsonData.statistic.amount}>0</span>

Possible duplicate of [How to print a number with commas as thousands separators in JavaScript](https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) — musefan, Jun 04 '18 at 14:57
This doesn't supply the option of both decimal numbers and commas from what i can see... — Mark, Jun 04 '18 at 14:59
Did you read further than the first answer? For example, the [second highest voted answer](https://stackoverflow.com/a/17663871/838807) seems to do exactly what you want — musefan, Jun 04 '18 at 15:02
the toLocalString() is what I have tried to implement, for some reason it isn't working maybe i'm doing something wrong.... — Mark, Jun 04 '18 at 15:04
Did you try: `this.Counter.toFixed(2).toLocaleString()` (with an *e*) — freedomn-m, Jun 04 '18 at 15:08

score 1 · Accepted Answer · answered Jun 04 '18 at 15:10

1

You can use toLocaleString()

var number = 1547885415.235489654

console.log('Correctly formated number : ', number.toLocaleString('en-US', {maximumFractionDigits: 2}));

answered Jun 04 '18 at 15:10

ekans

1,662
14
25

Animated number counter not adding commas

1 Answers1