Давайте сделаем так, чтобы по нажатию на одну кнопку стартовал таймер, а по нажатию на другую - останавливался. Трудность здесь заключается в том, что нужно передать 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';
}