Analyse van de afwisseling van kruisje en nulletje

In deze les wil ik je laten zien hoe je de afwisseling van kruisje en nulletje in één regel code kunt maken. Je hebt waarschijnlijk zoiets gedaan:

function start(cells) {
	let i = 0; // beginwaarde van de teller
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // verhoog de teller
		});
	}
}

Ik stel voor de taak korter op te lossen. Laten we een array van onze 'spelers' maken:

let gamers = ['X', 'O'];

Zoals je ziet, heeft het kruisje in deze array sleutel 0, en het nulletje - sleutel 1. Het zelfde kan gezegd worden over i % 2 - voor het kruisje zal de rest 0 zijn, en voor het nulletje - 1.

Dat betekent dat je dit ding in plaats van de sleutel kunt gebruiken:

let gamers = ['X', 'O'];
let key = i % 2;

console.log(gamers[key]);

Of nog korter:

let gamers = ['X', 'O'];
console.log(gamers[i % 2]);

Of nog korter:

console.log(['X', 'O'][i % 2]);

Laten we nu de code van onze functie start vereenvoudigen:

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			this.textContent = ['X', 'O'][i % 2];
			i++;
		});
	}
}

Breng de beschreven wijziging zelfstandig aan, zonder in mijn code te spieken.

Op dit moment kan op elke cel een onbeperkt aantal klikken worden gedaan, waardoor bijvoorbeeld een kruisje in een nulletje verandert. Repareer dit.