Javascript counter going to 0 instead of given number

Question

Edited according to voters:

My main problem right now, is that I created a counter in java. Numbers are suppose to go from 0 to the given number at page load, as you can see on example here: https://codepen.io/corpid/pen/poJERBM…

It works like a charm in that page... in codepen.io,

When I add it to my wordpress site, when I load the web, instead of increasing from 0 to given number (there are 3 different numbers), the counter goes from given number to 0... it goes backwards like a countdown to 0

For example, the first item is supposed to go from 0 to 500, but it goes from 500 to 0.... only on my web, cause in Codepen it works fin...

Webpage to see problem is: https://webreviewing.com/CCMS

this is the function

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

there's no thousand separator in JS (numerically speaking) you really must use 1500 to represent a thousand and 500 hundred. But, what makes you think that the code should stop before 0, there's nothing saying that — Calvin Nunes, Feb 21 '20 at 13:04
@CalvinNunes in C# there is `_` as seprator (optional) for litteral numbers — Pac0, Feb 21 '20 at 13:05
@CalvinNunes exactly. Handy for writing big values in your code. And of course, as user input, there is always the *parse* solution that will use a _locale / culture_ (and now in both C# and alsoJS, if I'm not mistaken) — Pac0, Feb 21 '20 at 13:07
There is a solution involving locale : https://stackoverflow.com/a/45309230/479251 — Pac0, Feb 21 '20 at 13:08
You have a `foreach` loop going on not a regular `for`. It's gonna loop through all the elements returned by your selector, if any. — emerson.marini, Feb 21 '20 at 13:08
Does this answer your question? [How can I parse a string with a comma thousand separator to a number?](https://stackoverflow.com/questions/11665884/how-can-i-parse-a-string-with-a-comma-thousand-separator-to-a-number) — Pac0, Feb 21 '20 at 13:09
I think that the real question here is how she stops the animation counter before 0... I really don't know, it's not clear — Calvin Nunes, Feb 21 '20 at 13:09
About the "need more focus" : I casted a vote for closure regarding duplicate with the thouasnd separator, but you have also the question with your countdown, which are two separate questions. (hence, the lack of focus voted by the two other close-voters) — Pac0, Feb 21 '20 at 13:10
Here's the jQuery documentation for the method you're using: https://api.jquery.com/each/ — emerson.marini, Feb 21 '20 at 13:10
Can't you just append `.toLocaleString()` to the `Math.ceil()` call? Is that what you are asking? I'm not sure sorry. — vicpermir, Feb 21 '20 at 13:11
your problem is that the numbers are counting and each function overwrites the other so **you don't need to call** `$('.count').each(function (thousands_sep) { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 1000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); });` **FOUR times you should DELETE THREE of this Code duplicates** , I tested it on your website it works — Rkv88 - Kanyan, Feb 21 '20 at 15:57
for the people who close the question you should stop closing posts unless you sure its duplicate , He has a different problem beside the number separators — Rkv88 - Kanyan, Feb 21 '20 at 15:58
@Rkv88-Kanyan its not closed because of duplication, there are many more reasons to close questions — Calvin Nunes, Feb 21 '20 at 16:32
i mean i got the proplem solved but he might not see it in comments i want to add my previous comment as a answer with picture to prove it — Rkv88 - Kanyan, Feb 21 '20 at 16:33
My main problem right now, is that I created a counter in java. Numbers are suppose to go from 0 to the given number at page load, instead of increasing from 0 to given number (there are 3 different numbers), the counter goes from given number to 0... it goes backwards like a countdown to 0 For example, the first item is supposed to go from 0 to 500, but it goes from 500 to 0.... web: https://webreviewing.com/CCMS — Yely, Feb 22 '20 at 20:14
Hi @Yely i noticed you gave up on that animation thing , also you changed the class of every number if you still want the animation check this , https://codepen.io/vkv88/pen/ExjNqYa?editors=1000 — Rkv88 - Kanyan, Feb 23 '20 at 16:09
@Yely you put comma manually remove it and put the hole number like before inside the class you want `.count` — Rkv88 - Kanyan, Feb 23 '20 at 16:15
it also added the separation dynamically after animation ended using callback i used @Jay Vaghasiya function to do that — Rkv88 - Kanyan, Feb 23 '20 at 16:17
because if the number 1500 changed to 4 digit number lets'say 20,000 you will have to add it manually So with this code `jQuery('.millions , .count , .count3 ').each(function () { jQuery(this).prop('Counter',0).animate({ Counter: jQuery(this).text() }, { duration: 1000, easing: 'swing', complete:function(){jQuery(this).text(jQuery(this).text().replace(/\B(?=(\d{3})+(?!\d))/g, ','))}, step: function (now) { jQuery(this).text(Math.ceil(now)); } }); });` — Rkv88 - Kanyan, Feb 23 '20 at 16:30

score 1 · Answer 1 · answered Feb 21 '20 at 13:09

1

const numberWithCommas = number => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

console.log(numberWithCommas(1500));

answered Feb 21 '20 at 13:09

Jay

2,826
2
13
28

1

It would be nice to add some context to your answer, as it's clear the OP is a beginner. – emerson.marini Feb 21 '20 at 13:11
@melancia Sorry for that my bad i thought she had mid level knowledge that is why i just provided pseudo code without any description – Jay Feb 24 '20 at 04:44

Javascript counter going to 0 instead of given number

1 Answers1