I am making a timer and before I start the main countDown function by clicking on the button, I would like to be able to choose how long the break will last. I am changing the html with increasebreak() and decreaseBreak() functions, but it does not "see" the new value, just counts down from 3 which is the default value in html(breakTime). The main function works and parses normally.
I guess I have messed something with the scope but I can't figure it out. Thank you for your advices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="num">1 min</h1>
<div id="status"></div>
<button onclick='countDown(secs, "status")'>Start countdown</button>
<button onclick='increaseNumber()'>+</button>
<button onclick='decreaseNumber()'>-</button>
<h3 id="breakTime">3 min</h3>
<button onclick='increaseBreak()'>+</button>
<button onclick='decreaseBreak()'>-</button>
<h2 id="breakOutput"></h2>
<script src="script.js"></script>
</body>
</html>
var num = document.getElementById("num").innerHTML;
var secs = parseInt(num);
var takeBreak = document.getElementById("breakTime").innerHTML;
var breakTime = parseInt(takeBreak);
function countDown(secs, elem) {
var element = document.getElementById(elem);
//var secs = parseInt(num);
element.innerHTML = "Please wait for "+secs+" minutes";
var second = 0;
var timer = setInterval(function(){
var extraZero = second < 10 ? '0' : '';
document.getElementById("num").innerHTML = secs + ":" + extraZero + second;
if (second-- === 0) {
second = 59;
if (secs-- === 0){
clearInterval(timer);
element.innerHTML = '<h2>Countdown complete!</h2>';
element.innerHTML += '<h4>Take a break</h4>';
//when countDown is done, start a new function for Break countdown
startBreak();
}
}
}, 10);
}
function startBreak(breakTime, breakOutput){
var breakOutput = document.getElementById("breakOutput");
var breakTime = parseInt(takeBreak);
var second = 0;
var shortTimer = setInterval(function(){
var extraZero = second < 10 ? '0' : '';
document.getElementById("breakOutput").innerHTML = breakTime + ":" + extraZero + second;
if (second-- === 0) {
second = 59;
if (breakTime-- === 0){
clearInterval(shortTimer);
breakOutput.innerHTML = '<h2>Break done!</h2>';
//alert("Break done!");
//location.reload();
}
}
}, 10);
}
function increaseNumber() {
secs += 1;
document.getElementById("num").innerHTML = secs + ' min';
}
function decreaseNumber() {
if(secs >= 10) {
secs -= 1;
document.getElementById("num").innerHTML = secs + ' min';
}
}
function increaseBreak() {
breakTime += 1;
document.getElementById("breakTime").innerHTML = breakTime;
//I want to inject this value as a new breakTime for startBreak() function
takeBreak = breakTime; //referenced global variable inside the function
}
function decreaseBreak() {
if(breakTime >= 2) {
breakTime -= 1;
document.getElementById("breakTime").innerHTML = breakTime;
}
}
