тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Глобальные переменные JavaScript и остановка таймера с их помощью

Давайте сделаем так, чтобы по нажатию на одну кнопку стартовал таймер, а по нажатию на другую - останавливался. Трудность здесь заключается в том, что нужно передать id запущенного таймера из одной функции в другую. В этом нам помогут глобальные переменные JavaScript.

Исходники кода

<p id="elem">0</p> <button id="button-start">start</button> <button id="button-stop" disabled>stop</button> let elem = document.querySelector('#elem'); let buttonStart = document.querySelector('#button-start'); let buttonStop = document.querySelector('#button-stop'); buttonStart.addEventListener('click', start); buttonStop.addEventListener('click', stop); let id; function start() { id = setInterval(function() { elem.innerHTML = Number(elem.innerHTML) + 1; }, 1000); console.log(id); this.disabled = true; buttonStop.disabled = false; } function stop() { clearInterval(id); this.disabled = true; buttonStart.disabled = false; }
<p id="elem">0</p> <button id="button">start</button> let elem = document.querySelector('#elem'); let button = document.querySelector('#button'); button.addEventListener('click', start); let id; function start() { id = setInterval(function() { elem.innerHTML = Number(elem.innerHTML) + 1; }, 1000); this.removeEventListener('click', start); this.addEventListener('click', stop); this.innerHTML = 'stop'; } function stop() { clearInterval(id); this.removeEventListener('click', stop); this.addEventListener('click', start); this.innerHTML = 'start'; }

Смотрите также