How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

Question

I have a certain number and I use counter jquery function so that the number will animate from 0 to that number in a certain period of time. Now, the problem is when I add ,(comma) or .(dot) to the number as a thousand separator, it does not work. How do I make the script work with ,(comma) and .(dot) separator and get the result back with the ,(comma) and .(dot) too ?

html

<div class='number_container'>
    <span class='count'>317249</span>
</div>

css

.number_container {
    background: red;
    width: 100px;
    text-align: center;
    padding: 38px 0;
    border-radius: 50px;
    color: white;
    margin: 0 auto;
}

.count {
    font: 20px arial;
}

Js

$(document).ready(function() {
    $('.count').each(function() {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3500,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
});

Jsfiddle Preview

https://jsfiddle.net/y6zdmaeq/

I want the number 317249 to be displayed as 317,249 or 317.249 and count up from 0. Thank you

http://stackoverflow.com/questions/3883342/add-commas-to-a-number-in-jquery Look here EDIT: are you looking to achieve this with only jquery or is js in the question? I noticed you tagged js as well. — Erik Russell, Nov 06 '15 at 04:40
@jerseyetr it returns NaN, could you help me out and show an example how to use it in my codes ? Thank you. Yes with js is fine. — Charas, Nov 06 '15 at 04:47

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Combine with this answer and your code, just format code before .text()

https://jsfiddle.net/y6zdmaeq/2/

edited May 23 '17 at 12:23

Community

1
1

answered Nov 06 '15 at 05:08

ntdat3011

26
3

Thank you so much sir. Exactly what I'm looking for. simple and clean solution. =) – Charas Nov 06 '15 at 08:08

score 1 · Answer 2 · answered Nov 06 '15 at 05:27

I have coded html for your requirement. Please save this as an html file and please open it in browser. Please do vote if you like this. Please note that I have included an external plugin for the same."Happy coding!!"

<html>

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.bendewey.com/code/formatcurrency/jquery.formatCurrency-1.4.0.js"></script>

</head>
<script>
  $(document).ready(function() {
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 3500,
        easing: 'swing',
        step: function(now) {

          $("#hiddenInput").val(Math.ceil(now).toString());

          var formattedText = $(".currency").formatCurrency().val();

          //alert(formattedText);
          $(this).text(formattedText);
        }
      });
    });
  });
</script>
<style>
  .number_container {
    background: red;
    width: 100px;
    text-align: center;
    padding: 38px 0;
    border-radius: 50px;
    color: white;
    margin: 0 auto;
  }
  .count {
    font: 20px arial;
  }
</style>

<body>

  <div class='number_container'>
    <span class='count '>317249</span>
    <input type="hidden" class="currency" id="hiddenInput"></input>
  </div>
</body>

</html>

Thank you so much sir, however I chose to accept ntdat3011 's answer, as his is simpler, without external plugin. However, I can make use of your plugin for future project. =) — Charas, Nov 06 '15 at 08:09

How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

2 Answers2