Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

236
Vistas
JS clearinterval() not working, coundown timer showning old and recent remaining days

I'm making a simple countdown timer, the user inters the day and month then the website shows how many days and hours remaining till the event.

my problem is that when the user sets a date but then he changes it to another my code displays both remaining days

html code :

    <h1>Calander</h1>

    <input id="inputday" type="text" placeholder="day">
    <input id="inputMonth" type="text" placeholder="month">

    <p id="output"></p>

JS code :

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);
}
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

clearInterval doesn't work without argument. You should add global variable for 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>

about 4 years ago · Juan Pablo Isaza Denunciar

0

clearInterval() expects an interval ID returned by setInterval:

clearInterval(intervalID) intervalID The identifier of the repeated action you want to cancel. This ID was returned by the corresponding call to setInterval().

It doesn't matter that your code is only using one interval - you have to pass the interval ID to clearInterval.

const interval_id = setInterval(function() {
    console.log("Do something")
}, 1000)

// code ...
// stop the interval created earlier
clearInterval(interval_id)
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda