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);
}

CodePudding user response：

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>

CodePudding user response：

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)