So, this is my project, the one that made me think I cannot write JavaScript… Stuck for ages trying to pause count on click, more precisely to toggle between pause and resume. If I figure that out, I’ll continue with break counter… I have tried with variable that is set to true, and then toggling via setting toggle to false or true, but that didn’t work out… I think I don’t understand at all what must be done…
How about having a variable that stores the time when you pause. When you resume, read that variable into the timer.
Alternatively, you have the timer stop and then have js read the value of the id that displays the time and use that in the timer.
I think that whatever you solution you are going to have to pass values and start and clear a timer. I’m not sure that you will be able to just pause the timer; unless you look at timer APIs outside of core js – but I could be wrong.
I hope this helps.
1 Like
Thanks, but I’m still stuck. Here is an additional JSFiddle: https://jsfiddle.net/pilgrim011/6csxrh4j/13/.
Could anyone check my code and tell me what exactly to change in order to be able to resume timer, and to toggle state (paused/running) on every click? I’ve managed to stop/pause the code, but don’t know how to continue… In my code, you’ll see what I have tried, but that doesn’t work… If anyone can give me explanation of what’s wrong in my code - why it doesn’t work, and maybe correct my code so that it runs once again after it’s paused/stopped, that would stop me from committing a suicide. 
First of all - programming is hard. Don’t give up and definitely don’t hurt yourself over it 
When I first saw you code I wanted to suggest you to scrap it and start over from scratch. But as a challenge I decided to try to find the bugs.
You should use comments, whitespace and meaningful variable names (toggle, a, b 
), to make it easier for others to read you code.
Also I don’t like your use of eval.
You are putting variables in HTML, then taking them out to use in JS. Why?
So here is my attempt 
I commented out jQuery from your last if statement;
moved minutes and seconds outside of if;
corrected missing ids in <h1> tags;
Maybe something else…
$(document).ready(function () {
var toggle = true;
var a = document.getElementById("breakvalue");
a.innerHTML = 7;
var b = document.getElementById("sessionvalue");
b.innerHTML = 25;
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = 'numb'>" + b.innerHTML + "</h1>");
$("#breakplus").on("click", function () {
$("#breakvalue").html(eval(a.innerHTML) + 1);
});
$("#breakminus").on("click", function () {
if (a.innerHTML >= 2) {
$("#breakvalue").html(eval(a.innerHTML) - 1);
}
});
$("#sessionplus").on("click", function () {
$("#sessionvalue").html(eval(b.innerHTML) + 1);
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = 'numb'>" + b.innerHTML + "</h1>");
});
$("#sessionminus").on("click", function () {
if (b.innerHTML >= 2) {
$("#sessionvalue").html(eval(b.innerHTML) - 1);
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = 'numb'>" + b.innerHTML + "</h1>");
}
});
$("#crcl").on("click", function () {
var capture = document.getElementById("crcl");
var inner = capture.innerHTML;
var head = document.getElementById("numb");
var inn = head.innerHTML;
let minutes = eval(inn.slice(0, 2));
let seconds = eval(inn.slice(3));
if (toggle && isNaN(inn)) {
inter = setInterval(function () {
console.log(inn);
console.log(minutes);
console.log(seconds);
if (seconds >= 0) {
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id='numb'>" + minutes + ":" + seconds-- + "</h1>");
}
if (seconds < 0) {
seconds = 59;
minutes = eval(minutes - 1);
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id='numb'>" + minutes + ":" + seconds-- + "</h1>");
}
if (eval(minutes) < 0) {
$("#crcl").html("<h1>BREAK!!!</h1>");
clearInterval(inter);
}
toggle = false;
}, 1000);
}
if (toggle && !isNaN(inn)) {
minutes = eval(b.innerHTML - 1);
seconds = 59;
inter = setInterval(function () {
if (seconds >= 0) {
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id='numb'>" + minutes + ":" + seconds-- + "</h1>");
}
if (seconds < 0) {
seconds = 59;
minutes = eval(minutes - 1);
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id='numb'>" + minutes + ":" + seconds-- + "</h1>");
}
if (eval(minutes) < 0) {
$("#crcl").html("<h1>BREAK!!!</h1>");
clearInterval(inter);
}
toggle = false;
}, 1000);
}
if (!toggle) {
clearInterval(inter);
console.log(toggle);
toggle = true;
console.log(toggle);
//$("#crcl").remove();
//$(".center-block").html("<button type=button class= circle btn btn-primary id = crcl>" + inner + "</button>");
}
});
});
2 Likes
Thank you so much! 
Now, let me comment your comments.
When I first saw you code I wanted to suggest you to scrap it and start over from scratch. But as a challenge I decided to try to find the bugs.
Could you tell what is the better approach - now I will try to finish the project as it is, but I do plan to get back to it later and refactor it.
You should use comments, whitespace and meaningful variable names (toggle, a, b
), to make it easier for others to read you code.
Trust me, comments were there, and I have planned to give all the variables proper names, but I went crazy and blind trying to solve this pause/resume problem, cutting and pasting code everywhere, my comments became irrelevant at one point, so I decided to delete 'em. 
My head was about to explode! About var toggle, I thought it was a good name, since the variable is used for toggling true and false… Whitespace - do you mean for example var toggle = true instead of var toggle=true?
Also I don’t like your use of eval.
I read about it and I knew that any programmer would tell that it is dangerous, but was there another (easy) alternative to get what I want? I mean, an alternative that wouldn’t cost me extra lines of code?
You are putting variables in HTML, then taking them out to use in JS. Why?
Could you please clarify - I don’t see any variables in my HTML?
All in all, as I can see, my main mistakes were: forgetting h1 IDs on several places, putting minutes and seconds inside an if statement, and - biggest of all - putting stupid extra code inside the function:
$("#crcl").remove();
$(".center-block").html("<button type=button class= circle btn btn-primary id = crcl>" + inner + "</button>");
Don’t be afraid of the big bad eval. I know it’s popular to hate on it, but for projects like this it works very well and there’s no rational reason not to use it in what is essentially just a toy project.
1 Like
I can’t tell you how to write a code, I’m beginner myself, but I can tell you what to do when you are stuck.
If your code doesn’t work, you are desperate and no one wants to touch your code, open new document and start from scratch, don’t look at your old code, don’t copy/paste. Trust me your new code will be better.
true of false of what? how about toggleClockRunning (or better isClockRunning). To me looks much better.
Don’t be afraid of extra lines of code.
I think I didn’t express myself correctly, but I mean this (b.innerHTML) (maybe someone more experienced can prove me wrong):
$("#sessionvalue").html(eval(b.innerHTML)+1);
$("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");
All in all, don’t give up, keep learning and in a while you’ll be correcting other people code and giving know-it-all comments 
1 Like