Estoy haciendo un temporizador de cuenta regresiva simple, el usuario ingresa el día y el mes, luego el sitio web muestra cuántos días y horas quedan hasta el evento.
mi problema es que cuando el usuario establece una fecha pero luego la cambia a otra, mi código muestra los dos días restantes
código HTML :
<h1>Calander</h1> <input id="inputday" type="text" placeholder="day"> <input id="inputMonth" type="text" placeholder="month"> <p id="output"></p>Código JS:
let inputM let inputDay const inputYear = 2022 let runOrNot = 0 let log = 0 document.getElementById('inputMonth').addEventListener('keyup', event => { inputM = event.target.value runOrNot++ console.log(runOrNot) if (runOrNot > 2) { clearInterval() //not working run() } }) document.getElementById('inputday').addEventListener('keyup', e => { inputDay = e.target.value runOrNot++ console.log(runOrNot) if (runOrNot > 3) { clearInterval() //not working run() } }) function run() { //clearInterval() //doesnt work console.log(inputM) console.log(inputDay) const countDownDate = new Date(`${inputM} ${inputDay}, ${inputYear}`).getTime(); // Update the count down every 1 second const x = setInterval(function() { // Get today's date and time const now = new Date().getTime(); // Find the distance between now and the count down date const distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // Output the result document.getElementById("output").innerHTML = days + "d " + hours + "h " + minutes + "m "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("output").innerHTML = "EXPIRED"; } }, 1000); }clearInterval no funciona sin argumentos. Debe agregar una variable global para intervalId.
let inputM let inputDay const inputYear = 2022 let runOrNot = 0 let log = 0 document.getElementById('inputMonth').addEventListener('keyup', event => { inputM = event.target.value runOrNot++ console.log(runOrNot) if (runOrNot > 2) { clearInterval(intervalId) //not working run() } }) document.getElementById('inputday').addEventListener('keyup', e => { inputDay = e.target.value runOrNot++ console.log(runOrNot) if (runOrNot > 3) { clearInterval(intervalId) //not working run() } }) var intervalId; function run() { clearInterval(intervalId) //doesnt work console.log(inputM) console.log(inputDay) const countDownDate = new Date(`${inputM} ${inputDay}, ${inputYear}`).getTime(); // Update the count down every 1 second intervalId = setInterval(function() { // Get today's date and time const now = new Date().getTime(); // Find the distance between now and the count down date const distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // Output the result document.getElementById("output").innerHTML = days + "d " + hours + "h " + minutes + "m "; // If the count down is over, write some text if (distance < 0) { clearInterval(intervalId); document.getElementById("output").innerHTML = "EXPIRED"; } }, 1000); } <h1>Calander</h1> <input id="inputday" type="text" placeholder="day"> <input id="inputMonth" type="text" placeholder="month"> <p id="output"></p>clearInterval() espera un ID de intervalo devuelto por setInterval :
clearInterval(intervalID)intervalIDEl identificador de la acción repetida que desea cancelar. Este ID fue devuelto por la llamada correspondiente a setInterval().
No importa que su código solo use un intervalo: debe pasar la ID del intervalo a clearInterval .
const interval_id = setInterval(function() { console.log("Do something") }, 1000) // code ... // stop the interval created earlier clearInterval(interval_id)