Get Countup Number From Target Element

[trymeouteh]

[ ] Bug
[ X ] Feature request

CountUp.js version: 2.4.2

Description

When Javascript is disabled in the browser, the numbers will not show in the counters since the numbers are generated using JavaScript. I would like to suggest the following feature which will allow the numbers to show up even when JavaScript is disabled.

The ability for countup.js to read the number from the target element itself. Here is how I have to do this currently...

<h1 id="mycountup">2000</h1>

<script src="node_modules/countup.js/dist/countUp.umd.js"></script>

<script>
    window.onload = function () {
        new countUp.CountUp('mycountup', document.querySelector('#mycountup').innerHTML).start();
    }
</script>

Instead I would like to see something like this instead...

<h1 id="mycountup">2,000</h1>

<script src="node_modules/countup.js/dist/countUp.umd.js"></script>

<script>
    window.onload = function () {
        new countUp.CountUp('mycountup').start();
    }
</script>

Using server side languages like NodeJS or PHP, it is possible to get the number needed for the counter server side and pasting it into the HTML. Then all that is needed for the countup effect is to add the countup JS script, and some JS code to create the counter and the counter will get the countup number from the target element itself.

Either way, weather JavaScript is enabled in the browser or not, the number will appear on the page. However to get the countup animation, JavaScript will need to be enabled in the browser.

[inorganik]

In your example,

<h1 id="mycountup">2000</h1>

With javascript disabled, the number is displaying. I'd say this is a good fallback. So it seems like the only enhancement you're proposing is not having to use document.querySelector to get the end value?

[trymeouteh]

In your example,

<h1 id="mycountup">2000</h1>

With javascript disabled, the number is displaying. I'd say this is a good fallback. So it seems like the only enhancement you're proposing is not having to use document.querySelector to get the end value?

Exactly, if the number parameter is null or undefined, to get the number parameter from the innerHTML of the target element itself.

And it would be nice but not required to parse that number from the innerHTML to remove any seperators such as "," in numbers like 2,000. But having the parsing is not a big deal

[inorganik]

Hmm, I think I like that idea. Parsefloat should do the trick. Would you like to create a PR? I think there just needs to be a check for a null endVal, before using target element inner html for backwards compatibility.

On Fri, Feb 10, 2023 at 7:44 PM trymeouteh ***@***.***> wrote: In your example, <h1 id="mycountup">2000</h1> With javascript disabled, the number is displaying. I'd say this is a good fallback. So it seems like the only enhancement you're proposing is not having to use document.querySelector to get the end value? Exactly, if the number parameter is null or undefined, to get the number parameter from the innerHTML of the target element itself. And it would be nice but not required to parse that number from the innerHTML to remove any seperators such as "," in numbers like 2,000 — Reply to this email directly, view it on GitHub <#301 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA2X4IXVMW3EROF3CXEZ63WW34IJANCNFSM6AAAAAAUYK3VZU> . You are receiving this because you commented.Message ID: ***@***.***>

-- Sent from Gmail Mobile

[trymeouteh]

I could try, not familiar with git and never made a PR before. Forgive me if I make some mistakes with making this PR.