CODEWITHSUNDEEP
javascripthtmlcssanimationcss-animations
goat 9009
goat 9009

Reputation: 131

Problem with Animating Number Counter on Javascript

I was hoping to create a counter which would increment to the eventual number of followers. I have other code, but I just included the part that would affect the incrementation. Currently, when I run the program the HTML file only displays the final number of followers, and the word "Followers" showing it is able to get the proper number, but it isn't able to have an incrementation animation as I would like. How would I go about fixing this?

var text_field = document.getElementById('followers');

fetch(api)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    var number = data['Count'][0][0];
    const updateCount = () => {
      const target = number;
      const count = text_field.innerText;

      const increment = target / speed;

      if (count < target) {
        text_field.innerText = count + increment;
        setTimeout(updateCount, 5);
      } else {
        text_field.innerText = target + ' Followers';
      }
    };

    updateCount();
  });

Upvotes: 0

Views: 298

Answers (1)

fatalcoder524
fatalcoder524

Reputation: 1480

The innerText property returns a string value. Use the parseInt function before any calculations.

var text_field = document.getElementById("followers"); 

function counter(){
    var number = 100; 
    const updateCount = () => {
        const target = number;
        const count = parseInt(text_field.innerText); //parsing
        const speed=number;
        const increment = target / speed;
            
        if (count < target) {
            text_field.innerText = count + increment;
            setTimeout(updateCount, 5);
        } else {
            text_field.innerText = target;
        }
    };
    
    updateCount();
}
counter();
<div id="followers">1</div> Followers!!!

Upvotes: 2

Related Questions