休息时间为0时，番茄钟不会停止

Question

after a couple of days researching and struggling with this project i would like to ask for some help. The piece of code that doesnt get executed is the last one where the breaktime should stop when is 0 running the clearInterval method.

Also the I dont know how prevent the countdown to be executed multiple times when you click inside the red circle.

I´ma newbie so the code is as primitive as it gets but i´m trying.

Codepen link: https://codepen.io/Seonatic/pen/zRPygV

function countdown(){

    var session = document.getElementById("count").value;
    var time = document.getElementById("input").value =+session*60;
    var breakm = document.getElementById("break").value; 
    var breaktime =document.getElementById("input").value =+breakm*60;  
    var display = document.getElementById("input").value;
    var sec = 1;

    var myVar = setInterval(myTimer, 1000);

    function myTimer(){
        document.getElementById("input").value = time--;     

        if(time===0){
            window.clearInterval(myVar);
            var myVar2 = setInterval(increase, 1000);   
            function increase(){
                document.getElementById("input").value = breaktime--;
                if (breaktime===0) {
                    clearInterval(myVar2);

                }       
            }
        }
    }
} 

Answer 1

As far as I understood your problem, this should do the job:

 var val = 1; function add() { val++; x = val; if (val >= 1) { document.getElementById("count").value = +x; } } function minus() { val--; x = val; if (val >= 1) { document.getElementById("count").value = +x; } } function add2() { val++; x = val; if (val >= 1) { document.getElementById("break").value = x; } } function minus2() { val--; x = val; if (val >= 1) { document.getElementById("break").value = x; } } var isCountdownRunning = false; var myVar; function countdown() { var session = document.getElementById("count").value; var time = (document.getElementById("input").value = +session * 60); var breakm = document.getElementById("break").value; var breaktime = (document.getElementById("input").value = +breakm * 60); var display = document.getElementById("input").value; var sec = 1; if (isCountdownRunning === false) { myVar = setInterval(myTimer, 1000); isCountdownRunning = true; } function myTimer() { document.getElementById("input").value = time--; if (time === 0) { clearInterval(myVar); var myVar2 = setInterval(increase, 1000); function increase() { document.getElementById("input").value = breaktime--; if (breaktime === 0) { clearInterval(myVar2); isCountdownRunning = false; } } } } } 

 h1 { font-family: 'Righteous', cursive; font-size: 68px; position: relative; top: 2px; font-weight: bold; color: red; text-align: center; } #circle { top: 35px; left: 37%; background: #FF2600; background: -moz-radial-gradient(center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%); background: -webkit-radial-gradient(center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%); background: radial-gradient(ellipse at center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%); position: relative; display: block; height: 400px; width: 400px; border-radius: 100%; border: 1.2px solid black; } #icon { position: relative; top: 30px; } #contador { position: relative; top: -20px; left: 38%; background-color: white; display: block; height: 120px; width: 350px; border: 0.9px dotted white; } #pausa { position: relative; top: -59px; float: left; left: 50%; background-color: white; display: block; height: 60px; width: 175px; border: 0.1px black; } #sesion { font-family: 'Russo One', sans-serif; font-size: 65px; text-align: center; } #pausa { position: relative; top: -96px; background-color: black font-family: 'Russo One', sans-serif; font-size: 30px; text-align: center; } #contador { position: relative; top: -20px; font-family: 'Russo One', sans-serif; font-size: 0px; text-align: left; color: black; } #tp { position: relative; top: 9px; left: -136px; width: 30px; height: 30px; border-radius: 70%; border: 1px dotted black; background-color: red; color: white; } #tm { position: relative; top: 9px; left: -54px; width: 30px; height: 30px; background-color: red; color: white; border-radius: 70%; border: 1px dotted black; } #bp { position: relative; top: 96px; left: -31px; width: 30px; height: 30px; border-radius: 80%; border: 1px dotted black; background-color: red; color: white; } #bm { position: relative; top: 94px; left: 42px; width: 30px; height: 30px; background-color: red; color: white; border-radius: 70%; border: 1px dotted black; } #ct { font-size: 20px; position: relative; top: 10px; left: 45px; } #bt { position: relative; font-size: 20px; position: relative; top: 3px; left: 5px; } #count { position: relative; top: -190px; left: 85px; background-color: white; color: black; width: 70px; height: 60px; text-align: center; font-family: 'Russo One', sans-serif; font-size: 38px; } #break { position: relative; top: -19px; left: 5px; background-color: white; color: black; width: 70px; height: 60px; text-align: center; font-family: 'Russo One', sans-serif; font-size: 38px; } #input { position: relative; top: 150px; left: -80px; width: 200px; height: 60px; font-family: 'Russo One', sans-serif; font-size: 28px; text-align: center; border-radius: 5%; border-width: 2.2px; border-color: red; -webkit-box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.84); box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.54); } #pause { position: relative; top: 150px; left: 60px; width: 120px; height: 40px; font-family: 'Russo One', sans-serif; font-size: 28px; text-align: center; border-radius: 5%; border-width: 4px; border-color: red; background-color: yellow; -webkit-box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.84); box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.54); } 

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Pomodoro</title> </head> <body> <h1><img id="icon" src="https://png.icons8.com/windows/100/000000/tomato.png">Pomodoro Clock</h1> <div id="contador"> <p id="ct">Session time:</p> <button id="tp" value="1" onclick='add()'>+</button> <button id="tm" value="1" onclick='minus()'>-</button> <div id="pausa"> <button id="bp" value="1" onclick='add2()'>+</button> <button id="bm" value="1" onclick='minus2()'>-</button> <p id="bt">Break Time:</p> <input type="text" size="25" value="5" id="break" min="1"> </div> </div> <div id="circle" onclick='countdown()'> <input type="text" id="input" size="25" value="1" min="0"> <input type="text" size="25" value="1" id="count" min="1"> <input type="text" size="25" value="PAUSE" id="pause" min="1" onclick='break()'> </div> 

Because you forgot the implement a way of checking if the countdown is already running, the interval got set over, and over, and over again.