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:

javascriptlet 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:

javascriptfunction 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ẻ.