Skip to content

Get Countup Number From Target Element #343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

trymeouteh
Copy link
Contributor

I'm submitting a...

[ ] Bug Fix
[X] Feature
[ ] Other (Refactoring, Added tests, Documentation, ...)

Checklist

  • Test your changes
  • Followed the build steps

Description

please describe the changes that you are making

Adding this feature request
#301

for features, please describe how to use the new feature

This feature allows you not to have to set the endVal parameter when constructing the CountUp() object. This will allow it to default to reading the target element inner HTML as the endVal.

The target element innerHTML can be a generic number such as 2000 or it can have separators 2,000 and a new internal method will parse the innerHTML value to remove the separators and convert it to a number.

please include a reference to an existing issue, if applicable
#301

Does this PR introduce a breaking change?

[ ] Yes
[X] No

@trymeouteh
Copy link
Contributor Author

This is my first PR for a Typescript project. Just learned the basics to Typescript and I hope these changes can be made. I did run the tests and none of the tests fail. And the PR has very few lines of code changes.

Copy link
Owner

@inorganik inorganik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delay on this, but I tend to procrastinate on risky changes like this because if there's a bug, it breaks for a lot of people. I left 1 comment.

src/countUp.ts Outdated
@@ -335,4 +337,7 @@ export class CountUp {
easeOutExpo = (t: number, b: number, c: number, d: number): number =>
c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;

removeSeparators(number: string): number {
return Number(number.split(',').join(''));
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change this to the following:

return parseFloat(str.replace(new RegExp(this.options.separator, 'g'), ''))

Using parseFloat()
@trymeouteh
Copy link
Contributor Author

Done

You may want to add a test for it, this is my demo/test code for the feature to ensure it works...

<script> window.addEventListener("load", function () { new countUp.CountUp("my-count-up").start(); }); </script>">
<h1 id="my-count-up">2,000</h1>

<script src="countUp.umd.js"></script>

<script>
  window.addEventListener("load", function () {
    new countUp.CountUp("my-count-up").start();
  });
</script>

@inorganik inorganik merged commit d51a196 into inorganik:master Jun 2, 2025
@trymeouteh
Copy link
Contributor Author

Thank you for accepting the pull request

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants