How can I use `data-to` in HTML to achieve my desired output?

1

I want to to have a number appear with a percentage sign but using this method data-to it doesn’t show as a valid value. I always get the output “NaN” Instead of 100%. The reason why I’m using data-to is due to reasons in relation to the appearance of the value.

Below represents my code. As you can see in the “screenshot 1” the code works. However, I want to add a “%” symbol after the 100.

<h6><strong class="counter-timer" data-from="0" data-to="9534"></strong></h6>

If I add a percentage sign after the 100 integer the value will appear as “NaN”. This is demonstrated in my code below and “screenshot 2”. However, I want to use the data-to effect but add a “%” symbol to my integer value. How can I go about fixing this?

<h6><strong class="counter-timer" data-from="0" data-to="9000%"></strong></h6>

SCREENSHOT 1:

SCREENSHOT 1
SCREENSHOT 12160×366

SCREENSHOT 2:

SCREENSHOT 2
SCREENSHOT 22056×370

2

data-to is not a standard HTML attribute, so you’ve got some JavaScript at work here using that value (I assume it animates the values from 0). It’s clear that the code coerces data-to to a number, and since % has no numerical value, you get NaN. The solution is simple - instead of putting the percent sign inside the data-to attribute, put it in the markup.

<h6><strong class="counter-timer" data-from="0" data-to="9000"></strong>*** put it here *** %</h6>
3