Problem with Animating Number Counter on Javascript

Question

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(); });

luek baja · Accepted Answer · 2020-07-03 03:41:10Z

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!!!

Collectives™ on Stack Overflow

Problem with Animating Number Counter on Javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related