Tlačítka pro spuštění a zastavení časovače v JavaScriptu

Nyní vytvořme dvě tlačítka: kliknutím na první nechť se časovač spustí a kliknutím na druhé - zastaví. Zde to již nebude tak jednoduché a čeká nás háček. Abyste pochopili podstatu tohoto háčku, popsal jsem vytváření kódu krok za krokem.

Takže, uděláme dvě tlačítka:

<button id="start">start</button>
<button id="stop">stop</button>

Získáme odkazy na tato tlačítka do proměnných:

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

Kliknutím na první tlačítko spustíme časovač, jehož číslo zapíšeme do proměnné:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

A nyní zastavme časovač kliknutím na druhé tlačítko:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

// Zastavíme časovač:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Pokusíte-li se však spustit výše uvedený kód, čeká vás překvapení: při pokusu zastavit časovač se ukáže, že proměnná timerId je rovna undefined! Proč k tomu došlo? Protože při spuštění časovače jsme naši proměnnou timerId učinili lokální uvnitř funkce připojené k tlačítku start.

K vyřešení problému udělejme proměnnou timerId globální - v tomto případě bude přístupná jak ve funkci pro spuštění časovače, tak ve funkci pro zastavení:

let timerId; // učiníme proměnnou globální

start.addEventListener('click', function() {
	timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Nechť je dána proměnná, ve které je inicialně uloženo číslo 100. Jsou dána také dvě tlačítka. Kliknutím na první tlačítko spusťte časovač, který bude každou sekundu snižovat hodnotu proměnné o 1 a vypisovat novou hodnotu do konzole. Jakmile hodnota proměnné dosáhne nuly - zastavte časovač.

Kliknutím na druhé tlačítko zastavte časovač. Zastavte také časovač, pokud druhé tlačítko nebylo stisknuto, ale hodnota proměnné dosáhla nuly.

Nějaký programátor napsal kód, který po kliknutí na tlačítko spouští časovač vypisující do konzole aktuální čas:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Po spuštění kódu se však ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Jiný programátor také napsal kód pro řešení předchozí úlohy:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Po spuštění kódu se však opět ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Jiný programátor také napsal kód pro řešení předchozí úlohy:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Po spuštění kódu se však opět ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Jiný programátor také napsal kód pro řešení předchozí úlohy:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval();
});

Po spuštění kódu se však opět ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Kód, který jsem uvedl v teoretické části, nebere v úvahu, že na tlačítko start lze provést několik kliknutí. K nápravě tohoto problému lze po kliknutí na tlačítko start odebrat událost z tohoto tlačítka, a po kliknutí na tlačítko stop - ji znovu připojit. Opravte problém.