Aktivering af elementer i JavaScript

Lad os sige, at vi har en HTML-tabel #table med tomme celler.

Lad os gøre det sådan, at når der klikkes på en hvilken som helst celle, bliver den på en eller anden måde aktiveret, for eksempel ved at få en rød baggrund. For at gøre dette vil vi give de aktiverede celler en eller anden CSS-klasse:

.active {
	background: red;
}

Lad os implementere aktiveringen:

let tds = document.querySelectorAll('#table td');

for (let td of tds) {
	td.addEventListener('click', function() {
		this.classList.add('active');
	});
}

Der er givet en HTML-liste ul. Gør det sådan, at når der klikkes på ethvert punkt på listen, bliver det aktiveret med en rød baggrund.

Modificer den forrige opgave, sådan at når der klikkes på et allerede aktiveret punkt på listen, fjernes aktiveringen fra det.