Start és stop gombok JavaScript időzítőhöz

Most készítsünk két gombot: az elsőre kattintva induljon el az időzítő, a másodikra kattintva pedig álljon meg. Itt már nem lesz minden olyan egyszerű, és lesz egy meglepetés. Annak érdekében, hogy megértsük ennek a meglepetésnek a lényegét, lépésről lépésre írom le a kód létrehozását.

Tehát készítünk két gombot:

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

Ezekre a gombokra hivatkozást kapunk változókba:

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

Az első gombra kattintva indítsuk el az időzítőt, annak számát egy változóba mentve:

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

És most állítsuk le az időzítőt a második gomb megnyomásakor:

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

// Az időzítő leállítása:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Azonban, ha a fenti kódot megpróbáljuk futtatni, meglepetés éri majd: az időzítő megállításának próbálatakor kiderül, hogy a timerId változó undefined! Miért történt ez? Mert az időzítő indításakor a timerId változónkat lokálissá tettük a start gombhoz kötött függvényen belül.

A probléma megoldásához tegyük a timerId változót globálissá - ebben az esetben elérhető lesz mind az időzítő indításának, mind a megállításának a függvényében:

let timerId; // tegyük a változót globálissá

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

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

Legyen adott egy változó, amelyben kezdetben a 100 szám található. Adott továbbá két gomb. Az első gomb megnyomására indítson el egy időzítőt, amely másodpercenként csökkenti a változó értékét 1-gyel, és az új értéket kiírja a konzolra. Amint a változó értéke eléri a nullát - állítsa le az időzítőt.

A második gomb megnyomására állítsa le az időzítőt. Állítsa le az időzítőt akkor is, ha a második gomb nincs megnyomva, de a változó értéke elérte a nullát.

Egy programozó írt kódot, amely a gomb megnyomására elindít egy időzítőt, amely kiírja a konzolra az aktuális időt:

<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);
});

A kód indítása után azonban kiderült, hogy a stop gomb nem működik. Javítsa ki a kód szerzőjének hibáját.

Egy másik programozó szintén kódot írt az előző feladat megoldására:

<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);
});

A kód indítása után azonban ismét kiderült, hogy a stop gomb nem működik. Javítsa ki a kód szerzőjének hibáját.

Egy másik programozó szintén kódot írt az előző feladat megoldására:

<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);
});

A kód indítása után azonban ismét kiderült, hogy a stop gomb nem működik. Javítsa ki a kód szerzőjének hibáját.

Egy másik programozó szintén kódot írt az előző feladat megoldására:

<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();
});

A kód indítása után azonban ismét kiderült, hogy a stop gomb nem működik. Javítsa ki a kód szerzőjének hibáját.

Az elméleti részben bemutatott kódom nem veszi figyelembe, hogy a start gombra többször is kattinthatunk. A probléma helyesbítése érdekében a start gomb megnyomásakor leválaszthatjuk az eseményt erről a gombról, a stop gomb megnyomásakor pedig visszaköthetjük. Javítsa ki a problémát.