Javascript-EventListener对两侧的整个跨度上的点击做出反应

我对学习JavaScript还不熟悉，我自己动手构建了一个用于学习的TictaToe游戏

以下是迄今为止的游戏外观，您可以看到它非常基本：

我让用户选择“X”或“O”开始。我在HTML代码中有一个明显的“onclick”函数，但在做了一些在线研究后，我发现这在业界是一个不好的做法

在HTML中执行“onclick”（例如

）允许它，因此我的用户必须单击X或O，它的行为完全符合我的要求

使用事件侦听器执行此方法似乎会使其变得混乱-用户可以单击“X”的最左侧或稍偏右侧，它仍然被选为X。即使在“O”的右侧，它也会选择X。有什么建议吗？我上传了我的小项目，所以你可以看看我在做什么

以下是EventListener的JS：

document.addEventListener('DOMContentLoaded', function(domReadyEvent) {
  //observe clicks on the document
  document.addEventListener('click', function(clickEvent) {
    if (clickEvent.target.className.indexOf('X') > -1) {
      alert('clicked on X');
      //handle click on X
    } else if (clickEvent.target.className.indexOf('O') > -1) {
      alert('clicked on O');
      //handle click on O
    }
  });
});

我希望这也能在严格的JavaScript中完成。我熟悉HTML、CSS和更复杂的语言，如C/C++但对JS几乎没有经验

我也有一个问题，我的“O”没有选择，幸好它得到了帮助：

---

问题是您没有为O设置类

需要是：O

---

问题是您尚未为设置类

O

（理想情况下，可以使用类或id，但不能同时使用二者）

另外，为了回答您的另一个问题，最好只针对以下元素：

var naught = document.getElementById('0');

naught.addEventListener('click', function(clickEvent) {
  alert('clicked on 0');
  // handle 0 event
});

---

而不是做那些

indexOf

检查

啊，对不起。我解决了这个问题，但我的主要问题仍然是一个问题。谢谢你指出这个愚蠢的错误。好的，你能把它作为一个答案吗