# Problem with Number Counter

**URL:** <https://forum.wixstudio.com/t/problem-with-number-counter/3456>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [April 14, 2021, 8:43pm UTC](https://forum.wixstudio.com/t/problem-with-number-counter/3456 "2021-04-14T20:43:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiron](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@kiron](https://forum.wixstudio.com/u/kiron)\
**Post date:** [April 14, 2021, 8:43pm UTC](https://forum.wixstudio.com/t/problem-with-number-counter/3456/1 "2021-04-14T20:43:58Z")

</div>

Hello, I am attempting to add a Number Counter found on wixcreate however I can not figure out a way to change the interval at which the numbers go up. My problem is that my first two numbers are 100 and 600 but my third number is 15,000 so I need it to go up drastically faster. I’ve attached a video of what the problem looks like.

I’ve tried changing the duration all the way down to zero and it still takes forever to get to 15,000. I think I need to change the interval between each step up. Like if I could make it count up by hundreds rather than by 1s that would be perfect but I can’t figure out how to do that. Any help is super appreciated!

Here is my code:

```javascript
// Counter1 //

$w.onReady(function () {});
let startNum1 = 0;
let endNum1 = 100;
const duration1 = 3; // 1000 milliseconds 

$w.onReady(function () {
    setInterval(()=> {
        countUp1();     
    }, duration1);
});

function countUp1(){    
 if (startNum1 <= endNum1 ){
        $w('#StartNumber1').text = startNum1.toString();
        startNum1++;
    }
}

// Counter2 // 

$w.onReady(function () {});
let startNum2 = 0;
let endNum2 = 600;
const duration2 = 2; // 1000 milliseconds 

$w.onReady(function () {
    setInterval(()=> {
        countUp2();     
    }, duration2);
});

function countUp2(){    
 if (startNum2 <= endNum2 ){
        $w('#StartNumber2').text = startNum2.toString();
        startNum2++;
    }
}

// Counter3 //

$w.onReady(function () {});
let startNum3 = 0;
let endNum3 = 15000;
const duration3 = 0; // 1000 milliseconds 

$w.onReady(function () {
    setInterval(()=> {
        countUp3();     
    }, duration3);
});

function countUp3(){    
 if (startNum3 <= endNum3 ){
        $w('#StartNumber3').text = startNum3.toString();
        startNum3++;
    }
}

```

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 14, 2021, 10:11pm UTC](https://forum.wixstudio.com/t/problem-with-number-counter/3456/2 "2021-04-14T22:11:11Z")

</div>

You should not use more than just ONE —\> $w.onReady in your CODE.  
It’s not recommended.

```javascript
$w.onReady(()=>{
    start_Counter1();
    start_Counter2();
    start_Counter3();
});

function start_Counter1(){
   let startNum1 = 0;
   let endNum1 = 100;
   const duration1 = 25; // 1000 milliseconds 

   setInterval(()=> {
       if (startNum1 <= endNum1 ){
            $w('#StartNumber1').text = startNum1.toString();
            startNum1++;
            console.log(startNum1)
      }     
   }, duration1);
}

function start_Counter2(){
   let startNum2 = 0;
   let endNum2 = 600;
   const duration2 = 10; // 1000 milliseconds 

   setInterval(()=> {
       if (startNum2 <= endNum2 ){
           $w('#StartNumber2').text = startNum2.toString();
           startNum2++;
           console.log(startNum2)
      }     
   }, duration2);
}

function start_Counter3(){
   let startNum3 = 0;
   let endNum3 = 15000;
   const duration3 = 5; // 1000 milliseconds 
   let factor = 1

   setInterval(()=> {
      if (startNum3 <= endNum3 ){
      if (startNum3.toString().length>2){factor=5}
      if (startNum3.toString().length>3){factor=10}
           $w('#StartNumber3').text = startNum3.toString();
           startNum3=startNum3+(1*factor);
           console.log(startNum3)
       }    
   }, duration3);
}

```

Working example:  
[https://www.media-junkie.com/custom-counter](https://www.media-junkie.com/custom-counter)

---

<div class="post-metadata">

**Author:** ![jose-kizhakedathu](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jose-kizhakedathu/32/2418_2.png) [@jose-kizhakedathu](https://forum.wixstudio.com/u/jose-kizhakedathu)\
**Post date:** [June 5, 2021, 5:13pm UTC](https://forum.wixstudio.com/t/problem-with-number-counter/3456/3 "2021-06-05T17:13:18Z")

</div>

Hey @russian-dima thank you for the code above. It’s super helpful.

I just wanted to know if there’s a way to start the count up only onviewportEnter??

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 5, 2021, 10:13pm UTC](https://forum.wixstudio.com/t/problem-with-number-counter/3456/4 "2021-06-05T22:13:38Z")

</div>

```javascript
$w.onReady(()=>{
   //First counter will start automaticaly.....
	start_Counter1();
	
   //Second counter will start on Button-Click.....
	$w('#myButtonElement').onClick(()=>{
		start_Counter2();
	});
   //Third counter will start on ViewPortEnter.....	
	$w('#myWhichEverElement').onViewportEnter(()=>{
	       start_Counter3();
	});
});

```