Problems with padStart

JavaScript
1

hello,
this source should activate 3 counters from 00000 to 00123, to 00456 and to 00789
my problem is I dont know how to use padStart because I would like to have the counters output always with 5 digits. I was trying various things but nothing worked. exapmle:
countValue = (countValue.padStart(5, ‘0’));
It would be great if someone could helped me out
thx

<?php
$a = "00123";
$b = "00456";
$c = "00789";
?>
<!DOCTYPE HTML>  
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="main">
        <div class="counters">
            <div id="count1" countTo="<?= $a; ?>" countDuration="1000"></div>
            <div id="count2" countTo="<?= $b; ?>" countDuration="1000"></div>
            <div id="count3" countTo="<?= $c; ?>" countDuration="1000"></div>
        </ul>
    </div>
<script>
    jQuery($ => {
        const counterElements = $('[countTo]').toArray();
        counterElements.forEach(element => {
            const $element = $(element);

            $element.animate({
                counter: +$element.attr('countTo')
            }, {
                duration: +$element.attr('countDuration'),
                easing: 'swing',
                step: countValue => {
                    $element.text(Math.ceil(countValue));
                }
            });
        });
    });
</script>
</body>
</html>
2

You aren’t showing how you’re using it, but I suspect you’re trying to apply the function to a number, and padStart is for strings. numbers don’t have padding (that wouldn’t make sense – 00000 is 0, 00123 is 123), the concept is only relevant when they are strings (it’s visual formatting)

3

For the sake of simplicity, I left out style. You can copy the source into your environment and test it. The 3 counters are displayed in a div element but unfortunately only three digits. So e.g. if the counter counts up to 500 I would like to see 00500 displayed. Unfortunately I don’t know how to solve this problem and I hope for your help

4

No, you’ve left out the code that shows where you’re trying to use padStart. I assume you are using it on the line where you define the variable countStart. countStart is a number. As I said in my reply you can’t pad numbers, that makes no sense. It needs to be a string

5

I thought this will do it but I was wrong:

step: countValue => {
	countValue = (countValue.padStart(5, ‘0’));
	$element.text(Math.ceil(countValue));
}
6

also numbers can be converted to string and vice versa, but as a JS newbee no chance for me to complete the task. Help needed :slight_smile:

7

Look at the API for animate, Step Function.
https://api.jquery.com/animate/

Step Function

…It accepts two arguments (now and fx), and this is set to the DOM element being animated.

now: the numeric value of the property being animated at each step

fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

Didn’t check but that does seem to suggest countValue would be a number and not a string.

8

No, I get that, it’s just impossible to use padStart on a number, it’s a string formatting function.

countValue.toString() would be how you convert a number to a string. You can’t do this countValue.padStart(5, ‘0’) because countValue is a number.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.