Animation on a integer value type in javascript creating an issue?

Question

There are 2 functions below- myCalculator() function which holds the variable with static value and animateValue() function will animate that value from var start to end.(defined var in 1st func.) But the issue is that the value is not animating on form button click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form id="contact" action="" method="post">
    <fieldset>
     <font class="label">How many people do you want to save per month? </font>  <input placeholder="" id="active-member" type="text" style="width:110px;float: right;"/>
    </fieldset>
   <fieldset>
    <button name="submit" type="button" id="contact-submit" onclick="myCalculator();" style="float: right;">Calculate</button>
    </fieldset>

   </form>

  <div class="container2" style="display:none;">
   Animating Value <span id="value" ></span>
   </div>

  <script>
  function myCalculator() {

    $(".container2").show();
    var start = 1000;
    var end = 23600191;
    animateValue("value", start, end, 1000);
    }

    function animateValue(id, start, end, duration) {
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
     }, stepTime);
      }

    </script>

Note:

animateValue function is not taking the value of var start and end
2000 is 2 second
myCalculate function calculating some values
animateValue function will animating the value

You have not assigned any value to the start and end parameters when you call animateValue. Worked fine when I added any values to it. Check this fiddle jsfiddle.net/e1xd4ru1/1 — Varun Sharma
– Varun Sharma, Commented Jan 16, 2018 at 10:02
@Varun scenerio is different here, I need to use start / end variable value from myCalculate() into animateValue() rather then using static value — Jasbir
– Jasbir, Commented Jan 16, 2018 at 10:06
why not call the animateValue function from myCalculate function itself. Or post some more code to explain what exactly your scenario is. — Varun Sharma
– Varun Sharma, Commented Jan 16, 2018 at 10:07
@Varun Finally I found the issue, code is working fine but when we change the var increment value from 1 to any number then it will not work. It continuing the animation to infinite number. And Its very important to set the var increment value — Jasbir
– Jasbir, Commented Jan 16, 2018 at 11:14
this fiddle jsfiddle.net/e1xd4ru1 check the var increment value and try to change it and see.. — Jasbir
– Jasbir, Commented Jan 16, 2018 at 11:26

Varun Sharma · Accepted Answer · 2018-01-16 11:55:00Z

1

The issue seems to be because of the fact that if you have an increment value apart from 1 then if the increment does not divide the range, you will overshoot the end and the loop never stops. So if you have your increment value set to 2, the following won't work

animateValue("value", 1, 2000, 2000);

Because 2 doesn't divide the range ie 1999 in this case but the following will work

animateValue("value", 1, 2001, 2000);

because the range is 2000 and is divisible by increment. See this fiddle https://jsfiddle.net/e1xd4ru1/3/

to solve this, you can change your loop exit condition to check whether current >= end for positive value of increment and current <= end for negative value of increment.

Hope this answers your question.

edited Jan 16, 2018 at 11:55

answered Jan 16, 2018 at 11:40

Varun Sharma

1,7521 gold badge16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jasbir Over a year ago

Yes, may be this is the answer, But I am not capable to change the loop exit condition. Can you do it.?

Varun Sharma Over a year ago

Updated the fiddle. Check the link in the answer

Jasbir Over a year ago

I have check your fiddle, But can you update your fiddle with main question ?

Varun Sharma Over a year ago

@Jasbir have updated the fiddle - jsfiddle.net/e1xd4ru1/4 . Please do mark as accepted answer if it solved the issue

Jasbir Over a year ago

Can you seeing my initial asked question.?

|

Collectives™ on Stack Overflow

Animation on a integer value type in javascript creating an issue?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related