Анализ на редуване на кръст и нула

В този урок искам да ви покажа как да направите редуване на кръст и нула в един ред. Вероятно сте направили нещо подобно:

function start(cells) {
	let i = 0; // начална стойност на брояча
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // увеличаваме брояча
		});
	}
}

Ще предложа да решим задачата по-кратко. Нека направим масив от нашите 'играчи':

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

Както виждате, в този масив кръстът има ключ 0, а нулата - ключ 1. Същото може да се каже и за i % 2 - за кръст остатъкът ще бъде 0, а за нула - 1.

Тоест това нещо може да се използва вместо ключ:

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

console.log(gamers[key]);

Или още по-кратко:

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

Или дори още по-кратко:

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

Нека сега опростим кода на нашата функция start:

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

Самостоятелно, без да поглеждате в моя код, внесете описаната промяна.

В момента може да се правят неограничен брой кликове върху всяка клетка, променяйки например кръст на нула. Поправете това.