Ανάλυση εναλλαγής X και O

Σε αυτό το μάθημα θέλω να σας δείξω πώς να κάνετε την εναλλαγή X και O σε μία γραμμή κώδικα. Πιθανότατα, έχετε κάνει κάτι τέτοιο:

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'];

Όπως βλέπετε, σε αυτόν τον πίνακα το X έχει κλειδί 0, και το O - κλειδί 1. Το ίδιο μπορεί να ειπωθεί και για το i % 2 - για το X το υπόλοιπο θα είναι 0, και για το O - 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++;
		});
	}
}

Ανεξάρτητα, χωρίς να κοιτάτε τον κώδικά μου, κάντε την περιγραφόμενη τροποποίηση.

Προς το παρόν, οποιοδήποτε κελί μπορεί να κάνει απεριόριστους κλικ, αλλάζοντας, για παράδειγμα, το X σε O. Διορθώστε το.