Lo que me gustaría que sucediera después de usar mi botón Borrar es que mi temporizador se reinicie cuando haga clic en el botón Hacer clic en mí otra vez. No importa lo que intente, no funcionará.
var sec = 5; var timerID; document.getElementById("b1").onclick = function() { timerID = setInterval(myTimer, 1000); }; function myTimer() { document.getElementById("b1").onclick = function() { myTimer() } document.getElementById('demo').innerHTML = sec + "sec."; sec--; if (sec <= -1) { clearInterval(timerID); document.getElementById("demo").innerHTML = "Time's Up!"; } } $(document).ready(function() { $("#b2").click(function() { $("#demo").html(""); }) }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <button id="b1">Click Me!</button> <p id="demo"></p> <button id="b2">Clear!</button> </body> </html>Lo que me gustaría que hiciera mi botón "Click Me" la segunda vez es reiniciar el temporizador. Eso no es lo que está pasando. He intentado muchas cosas, todo fue en vano.
¡Mira esto! :)
var sec = 5; var timerID; document.getElementById("b1").onclick = function() { timerID = setInterval(myTimer, 1000); }; function myTimer() { // document.getElementById("b1").onclick = function() { // myTimer() // } document.getElementById('demo').innerHTML = sec + "sec."; sec--; if (sec <= -1) { clearInterval(timerID); document.getElementById("demo").innerHTML = "Time's Up!"; } } $(document).ready(function() { $("#b2").click(function() { clearInterval(timerID); sec = 5; $("#demo").html(""); }) }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <button id="b1">Click Me!</button> <p id="demo"></p> <button id="b2">Clear!</button> </body> </html>Además de eliminar el innerHTML del elemento, también debe borrar el intervalo.
var sec = 5; var timerID; document.getElementById("b1").onclick = function() { timerID = setInterval(myTimer, 1000); }; function myTimer() { document.getElementById("b1").onclick = function() { myTimer() } document.getElementById('demo').innerHTML = sec + "sec."; sec--; if (sec <= -1) { clearInterval(timerID); document.getElementById("demo").innerHTML = "Time's Up!"; } } $(document).ready(function() { $("#b2").click(function() { $("#demo").html(""); clearInterval(timerID); }) }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <button id="b1">Click Me!</button> <p id="demo"></p> <button id="b2">Clear!</button> </body> </html>La función myTimer() está eliminando la acción onclick que inicia el temporizador.
Simplemente haga que el botón Borrar detenga el temporizador y mantenga el original onclick .
var sec = 5; var timerID; document.getElementById("b1").onclick = function() { timerID = setInterval(myTimer, 1000); }; function myTimer() { document.getElementById('demo').innerHTML = sec + "sec."; sec--; if (sec <= -1) { clearInterval(timerID); document.getElementById("demo").innerHTML = "Time's Up!"; } } $(document).ready(function() { $("#b2").click(function() { $("#demo").html(""); clearInterval(timerID); }) }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <button id="b1">Click Me!</button> <p id="demo"></p> <button id="b2">Clear!</button> </body> </html>