Luân phiên X và O
Sau khi giải quyết bài tập của bài học trước, bạn sẽ có được mã code như sau:
let cells = document.querySelectorAll('#field td');
start(cells);
function start(cells) {
for (let cell of cells) {
cell.addEventListener('click', function() {
this.textContent = 'X';
});
}
}
Bây giờ hãy thực hiện việc luân phiên giữa X và O. Để làm điều này, tôi đề xuất đưa vào một bộ đếm lượt đi:
function start(cells) {
let i = 0; // giá trị ban đầu của bộ đếm
for (let cell of cells) {
cell.addEventListener('click', function() {
this.textContent = 'X';
i++; // tăng bộ đếm
});
}
}
Với bộ đếm như vậy, chúng ta có thể dễ dàng thực hiện việc luân phiên X và O: rõ ràng là X sẽ xuất hiện ở các giá trị chẵn của bộ đếm, còn O - ở các giá trị lẻ.
Hãy thực hiện việc luân phiên X và O như đã mô tả.