Разбор чередование крестика и нолика

В данном уроке я хочу показать вам, как сделать чередование крестика и нолика в одну строчку. Вы скорее всего, сделали что-то такое:

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

Самостоятельно, не подсматривая в мой код, внесите описанную правку.

Сейчас на любую ячейку можно делать неограниченное количество кликов, меняя, например, крестик на нолик. Исправьте это.