How to get value from event listener when using interval

Question

I created a countdown watch using javascript and then added a stop button event listener used to stop the watch

when I stopped the clock and got stopped time every second(sec) was sent to return a single item one by one.

but I want only get the last item value , like (Ex : if StartTime(59:00min) stoptime(50:15 min)) I want to get only a stop time value of 50:15 mins

see this Bellow code

    function getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.parse(new Date());
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const days = Math.floor(total / (1000 * 60 * 60 * 24));
        return {
            total,
            days,
            hours,
            minutes,
            seconds
        };
    
    }
    
    function initializeClock(id, endtime) {
        const clock = document.getElementById(id);
        const daysSpan = clock.querySelector('.days');
        const hoursSpan = clock.querySelector('.hours');
        const minutesSpan = clock.querySelector('.minutes');
        const secondsSpan = clock.querySelector('.seconds');
    
        /* buttons */
        const startbutton = document.getElementById('Startbtn')
        const stopbtton = document.getElementById('Stopbtn');
    
        function updateClock() {
            const t = getTimeRemaining(endtime);
    
            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    
            if (t.total <= 0) {
                clearInterval(timeinterval);
            } else {
                stopbtton.addEventListener('click', (e) => {
                    clearInterval(timeinterval);
                    var StopTime = t.minutes + ":" + t.seconds;
                    console.log(StopTime); /* retunred on single item */
                })
            }
        }
        // updateClock();
        const timeinterval = setInterval(updateClock, 1000);
    
    }
    
    
    
    const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
    
    initializeClock('clockdiv', deadline);

body {
    text-align: center;
    background: #00ECB9;
    font-family: sans-serif;
    font-weight: 100;
}

h1 {
    color: #396;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}

#clockdiv {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv>div {
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div>span {
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.smalltext {
    padding-top: 5px;
    font-size: 16px;
}

#ConferenceMinutes {
    animation: TimerBlink 1s linear infinite;
}

@keyframes TimerBlink {
    50% {
        opacity: 0.1;
    }
}

<!-- https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/ -->

<!-- https://stackoverflow.com/questions/20618355/how-to-write-a-countdown-timer-in-javascript -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <h1>Countdown Clock</h1>
    <div id="clockdiv">
        <div>
            <span class="days"></span>
            <div class="smalltext">Days</div>
        </div>
        <div>
            <span class="hours"></span>
            <div class="smalltext">Hours</div>
        </div>
        <div>
            <span id="ConferenceMinutes" class="minutes"></span>
            <div class="smalltext">Minutes</div>
        </div>
        <div>
            <span class="seconds"></span>
            <div class="smalltext">Seconds</div>
        </div>
    </div>
    <div>
       
        <button id="Stopbtn">StopTime</button>
        
    </div>

</body>
<script src="./app.js"></script>

</html>

Check the Console on the code snippet, How can I solve this?

Thanks

traynor · Accepted Answer · 2022-10-18T14:00:57.833

You need to move event listener outside the interval, run it only once, now you add it on each iteration, which causes that behavior.

try this:

const timeinterval = setInterval(updateClock, 1000);

stopbtton.addEventListener('click', (e) => {
    const t = getTimeRemaining(endtime);
    clearInterval(timeinterval);
    const StopTime = t.minutes + ":" + t.seconds;
    console.log(StopTime); /* retunred on single item */
})

Full snippet:

function getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.parse(new Date());
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const days = Math.floor(total / (1000 * 60 * 60 * 24));
        return {
            total,
            days,
            hours,
            minutes,
            seconds
        };

    }

    function initializeClock(id, endtime) {
        const clock = document.getElementById(id);
        const daysSpan = clock.querySelector('.days');
        const hoursSpan = clock.querySelector('.hours');
        const minutesSpan = clock.querySelector('.minutes');
        const secondsSpan = clock.querySelector('.seconds');

        /* buttons */
        const startbutton = document.getElementById('Startbtn')
        const stopbtton = document.getElementById('Stopbtn');

        function updateClock() {
            const t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            } 
        }
        // updateClock();
        const timeinterval = setInterval(updateClock, 1000);

        stopbtton.addEventListener('click', (e) => {
            const t = getTimeRemaining(endtime);
            clearInterval(timeinterval);
            const StopTime = t.minutes + ":" + t.seconds;
            console.log(StopTime); /* retunred on single item */
        })

    }



    const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

    initializeClock('clockdiv', deadline);

body {
    text-align: center;
    background: #00ECB9;
    font-family: sans-serif;
    font-weight: 100;
}

h1 {
    color: #396;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}

#clockdiv {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv>div {
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div>span {
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.smalltext {
    padding-top: 5px;
    font-size: 16px;
}

#ConferenceMinutes {
    animation: TimerBlink 1s linear infinite;
}

@keyframes TimerBlink {
    50% {
        opacity: 0.1;
    }
}

<!-- https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/ -->

<!-- https://stackoverflow.com/questions/20618355/how-to-write-a-countdown-timer-in-javascript -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <h1>Countdown Clock</h1>
    <div id="clockdiv">
        <div>
            <span class="days"></span>
            <div class="smalltext">Days</div>
        </div>
        <div>
            <span class="hours"></span>
            <div class="smalltext">Hours</div>
        </div>
        <div>
            <span id="ConferenceMinutes" class="minutes"></span>
            <div class="smalltext">Minutes</div>
        </div>
        <div>
            <span class="seconds"></span>
            <div class="smalltext">Seconds</div>
        </div>
    </div>
    <div>
       
        <button id="Stopbtn">StopTime</button>
        
    </div>

</body>
<script src="./app.js"></script>

</html>

How to get value from event listener when using interval

1 Answers1