I have my DOM like this :

     <input type="number" id="input" value="" placeholder="Enter time in minutes">
    <button id="button">Go</button>
    <button id="reset">reset</button>

    <div class="timer">
        <div class="mint" id="mint"></div>
        <div class="sec" id="sec"></div>
    </div>

And my JavaScript Like this :

let currentTime = 0;
let intervalClear;
let input = document.getElementById('input');
let button = document.getElementById('button')
button.addEventListener('click', ()=>{
    let value = input.value * 60000;
    function getTime(){
        currentTime  
        function backcount(currentTime){
            let output = value - currentTime
            console.log(output);
            const mint = document.getElementById('mint'),
            sec = document.getElementById('sec');

            let minute = Math.floor(output/60000)
            let second = ((output % 60000) / 1000).toFixed(0)
            mint.innerText = minute;
            sec.innerText = second;

            if(output == 0){
                clearInterval(intervalClear)
            }
        }
        backcount(currentTime);
    }
    getTime()
    intervalClear = setInterval(getTime, 1000)
})

const reset = document.getElementById('reset')
reset.addEventListener('click', ()=>{
    clearInterval(intervalClear);
    input.value = '';
})

now I want to display value in my web page But it doesn't updating. seems like its freezes. but my "setInterval()" running properly.

How can I resolve this issue? need help!

CodePudding user response：

You need instead of this code

let output = value - currentTime

use this

let output = value - (currentTime * 1000)

let currentTime = 0;
let intervalClear;
let input = document.getElementById('input');
let button = document.getElementById('button')
button.addEventListener('click', ()=>{
    let value = input.value * 60000;
    function getTime(){
        currentTime  
        function backcount(currentTime){
            let output = value - (currentTime * 1000)
            console.log(output);
            const mint = document.getElementById('mint'),
            sec = document.getElementById('sec');

            let minute = Math.floor(output/60000)
            let second = ((output % 60000) / 1000).toFixed(0)
            mint.innerText = minute;
            sec.innerText = second;

            if(output == 0){
                clearInterval(intervalClear)
            }
        }
        backcount(currentTime);
    }
    getTime()
    intervalClear = setInterval(getTime, 1000)
})

const reset = document.getElementById('reset')
reset.addEventListener('click', ()=>{
    clearInterval(intervalClear);
    input.value = '';
})

<input type="number" id="input" value="" placeholder="Enter time in minutes">
<button id="button">Go</button>
<button id="reset">reset</button>

<div class="timer">
    <div class="mint" id="mint"></div>
    <div class="sec" id="sec"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Script

    var intervalClear;
    var input = document.querySelector('#input');
    var mint = document.querySelector('#mint');
    var sec = document.querySelector('#sec');
    var go_button = document.querySelector('#button');
    var reset_button = document.querySelector('#reset');

    go_button?.addEventListener('click', () => {
        if (input.value != '' && input.value != 0 && parseInt(input.value) != NaN) {
            startTimer(input.value, mint, sec);
        }
    });

    reset_button?.addEventListener('click', () => {
        clearInterval(intervalClear);
        mint.textContent = '00';
        sec.textContent = '00';
    });

    function startTimer(duration, minElement, secElement) {
        clearInterval(intervalClear);
        var timer = duration * 60, minutes, seconds;
        intervalClear = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0"   minutes : minutes;
            seconds = seconds < 10 ? "0"   seconds : seconds;

            minElement.textContent = minutes;
            secElement.textContent = seconds;

            if (--timer < 0) {
                timer = duration;
            }

            if (minutes == 0 && seconds == 0) {
                clearInterval(intervalClear);
                mint.textContent = '00';
                sec.textContent = '00';
            }
        }, 1000);
    }

DOM

    <input type="number" id="input" placeholder="Enter time in minutes" >
    <button id="button">Go</button>
    <button id="reset">reset</button>

    <div class="timer">
      <div class="mint" id="mint">00</div>
      <div class="sec" id="sec">00</div>
    </div>