Hola a todos, actualmente estoy atascado tratando de depurar mi programa. MI objetivo es que cada vez que se haga clic en el botón "Iniciar animación", la página web muestre una tabla de tiempos animada de acuerdo con el número que el usuario ingresa en el campo de texto de la siguiente manera. Por ejemplo, si el usuario ingresó el número 6 en el campo de texto, la animación muestra 1 x 6 = 6, un segundo después lo reemplaza con 2 x 6 = 12, un segundo después lo reemplaza con 3 x 6 = 18 , etc. Si es 9 x 6 = 54, un segundo después se convierte en 1 x 6 = 6, y luego 2 x 6 = 12, y así sucesivamente.
var counter; var animationOn = false; var counterAnimation; function updateAnimation() { var value = document.getElementById('value1').value; for (var i = 1; i < 1000; i++) { for (var j = 1; j < 10; j++) { var product = j * value; var counterSpan = document.getElementById("counterHolder"); counterSpan.innerHTML = product; } } counterAnimation = setTimeout(updateAnimation, 1000); } function startAnimation() { if (animationOn == false) { animationOn = true; counter = 1; counterAnimation = setTimeout(updateAnimation, 1000); } } function stopAnimation() { if (animationOn == true) { animationOn = false; clearTimeout(updateAnimation); } } <body> <button onclick="startAnimation();"> Start animation </button> <button onclick="stopAnimation();"> Stop animation </button><br><br> <label>Enter an integer: </label> <input type="number" size=20 id=value1 name="value"> <span id="counterHolder">0</span> </body>Aquí hay una solución completa que cambia el valor mostrado por tiempo
let counter; let animationOn = false; let counterAnimation; let mult = 1; function updateAnimation() { let value = document.getElementById('value1').value; let counterSpan = document.getElementById("counterHolder"); if (mult >= 10) { mult = 1; counter = null; animationOn = false; counterAnimation = null; counterSpan.innerHTML = 0; return; } let product = mult * value; counterSpan.innerHTML = product; mult++ counterAnimation = setTimeout(updateAnimation, 1000) } function startAnimation() { if (!animationOn) { animationOn = true; counter = 1; counterAnimation = setTimeout(updateAnimation, 1000); } } function stopAnimation() { if (animationOn) { animationOn = false; clearTimeout(counterAnimation); mult = 1 counter = null animationOn = false counterAnimation = null } } <body> <button onclick="startAnimation();"> Start animation </button> <button onclick="stopAnimation();"> Stop animation </button><br><br> <label>Enter an integer: </label> <input type="number" size=20 id=value1 name="value"> <span id="counterHolder">0</span> </body>