0
Я делаю таймер и перед тем, как начать основную функцию countDown, нажав на кнопку, я хотел бы иметь возможность выбрать, как долго длится перерыв. Я изменяю html с функциями buildbreak() и reduceBreak(), но он не «видит» новое значение, просто отсчитывает от 3, которое является значением по умолчанию в html (breakTime). Основная функция работает и разбирается нормально.Сделать функцию обратного отсчета для синтаксического анализа нового значения из html
Я думаю, что я что-то испортил, но я не могу понять это. Спасибо за ваши советы
<!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;
}
}