Была задача - создать HTML-страницу с полем для ввода числа, кнопкой и div-элементом с числом 0. В поле для ввода должно вводиться число секунд, а кнопка должна запускать таймер. При запуске таймера число в div-элементе должно замениться на введённое в поле. Затем каждую секунду оно должно уменьшаться на единицу до тех пор, пока не дойдёт до 0. При этом таймер должен корректно работать, если во время его работы пользователь запускает его заново.
Я присвоил инпуту класс .time-input
, кнопке - класс .time-button
, и диву - .time-block
.
После достижения нуля таймер не остановился, то есть clearInterval почему-то не сработал.
document.addEventListener('DOMContentLoaded', function () {
let timeInput = document.querySelector('.time-input');
let timeButton = document.querySelector('.time-button')
let timeBlock = document.querySelector('.time-block');
function inputTime() {
timeBlock.textContent = timeInput.value;
}
function timer() {
timeBlock.textContent = parseInt(timeBlock.textContent) - 1;
}
function start() {
if(parseInt(timeBlock.textContent) > 0) {
window.timerId = setInterval(timer, 1000);
}else{
clearInterval(timer);
}
return;
}
timeButton.addEventListener('click', start);
timeInput.addEventListener('input', inputTime);
});
window.timerId
, а останавливаетеtimer