Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

235
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!