Lo siento si esta es una pregunta trivial, pero estoy tratando de diseñar un contador simple usando HTML y JS. Tiene un formulario de entrada y cada vez que el usuario escribe un número y lo envía, el div cuenta desde 0 hasta ese número en un intervalo de 1 segundo (usando setInterval). El problema es que quiero que cada vez que se actualice el número, debería aparecer con una animación de "rebote". Adjunto los archivos aquí. Por alguna razón, mi código solo hace el rebote una vez (cuando llega el número 1) y no después de eso. Sugiera amablemente un ajuste simple que puedo hacer en este código usando solo JavaScript simple. Gracias de antemano por la orientación.
function f() { var i = 0; var num = document.getElementsByTagName('input')[0].value num=parseFloat(num); var id=setInterval(function(){ i++; document.getElementsByTagName('h2')[0].innerText=i; document.getElementsByTagName('h2')[0].style.animation="bounce 0.2s" if (i==num) { alert("over!!") clearInterval(id); return; }},1000) } var button = document.getElementsByTagName('button'); button[0].addEventListener('click',f) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> input { border: 2px solid black; } div { height: 100px; width: 100px; margin: auto; border: 2px solid black; display: flex; justify-content: center; align-items: center; } @keyframes bounce { from{ } to { bottom: 10px; } } </style> </head> <body> <input type="text" name="counter"> <br> <button type="submit">Submit</button> <div><h2 style="position:relative;">0</h2></div> <script type="text/javascript" src="script2.js"></script> </body> </html>La solución más fácil es escuchar el final de la animación y volver a configurarlo como ninguno:
document.getElementsByTagName('h2')[0].onanimationend = function(){ this.style.animation = 'none' }