单击时循环浏览文本 - 使用事件监听器

Question

我正在尝试使用 javascript 创建一个井字游戏，如果用户点击一个单元格，该单元格会显示一个 X，然后再次点击会导致 O，第三次点击会导致空白单元格，这些可以循环显示。

然而，我正在努力使用事件侦听器使其工作，因为一旦记录了值，我似乎无法循环返回。有什么建议吗？

var cell = document.querySelector('#one');

var options=["X","O"," "]

cell.addEventListener("click",function(){
  cell.textContent = options[0];

cell.addEventListener("click",function(){
  cell.textContent = options[1];

cell.addEventListener("click",function(){
  cell.textContent = options[2];
})
})
})

Answer 1

您可以使用 Remainder % 运算符来循环数组，如下所示：

var cell = document.querySelector('#one');

 var options=["X","O"," "]
 var i = 0
 cell.addEventListener("click",function(){
 cell.textContent = options[i%options.length];
 i++;
 })

Answer 2

仅向您的单元格添加一个具有相应功能的 eventListener。一个简单的方法是全局声明一个计数器：let c = 0; 在函数中，您可以增加计数器 (c++)，然后使用它通过模运算符访问您的选项数组索引...

单击时循环浏览文本 - 使用事件监听器

Cycling through text on Click - using Event Listeners

javascript

event-listener

event-handling

addeventlistener