Analiza naprzemienności krzyżyka i kółka

W tej lekcji chcę ci pokazać, jak zrobić naprzemienność krzyżyka i kółka w jednej linii. Prawdopodobnie zrobiłeś coś takiego:

function start(cells) {
	let i = 0; // początkowa wartość licznika
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // zwiększamy licznik
		});
	}
}

Zaproponuję rozwiązanie zadania krócej. Zróbmy tablicę naszych 'graczy':

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

Jak widzisz, w tej tablicy krzyżyk ma klucz 0, a kółko - klucz 1. To samo można powiedzieć o i % 2 - dla krzyżyka reszta będzie 0, a dla kółka - 1.

To znaczy, że tego można użyć zamiast klucza:

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

console.log(gamers[key]);

Albo jeszcze krócej:

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

Albo jeszcze krócej:

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

Uprośćmy teraz kod naszej funkcji start:

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

Samodzielnie, nie podglądając w mój kod, wprowadź opisaną poprawkę.

Teraz na dowolną komórkę można wykonywać nieograniczoną liczbę kliknięć, zmieniając, na przykład, krzyżyk na kółko. Popraw to.