Question

我是学习JavaScript的新手，我自己开始构建一个用于学习目的的TicTacToe游戏。

到目前为止，这是游戏的样子，因为你可以看到非常基本： https://rjo.000webhostapp.com/

我让用户选择＆＃34; X＆＃34;或者＆＃34; O＆＃34;开始。我有一个功能，那就是＆＃34; onclick＆＃34;在HTML代码中，但经过一些在线研究后，我发现这是行业内的不良做法。

执行＆＃34; onclick＆＃34;在<div class="XO" onclick="userChoice">这样的HTML中允许它，所以我的用户必须点击X或O，它的行为正是我想要的。

使用事件监听器执行此方法似乎使其变得混乱 - 用户可以单击＆＃34; X＆＃34;的最左侧。或者在一个右边，它仍然被选为X.即使在＆＃34; O＆＃34;的右边。它会选择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的经验。

我也有一个问题，我的＆＃34; O＆＃34;没有选择，幸好得到了帮助：

问题是您没有为O
设置类
需要：O

Answer 1

问题是您没有为

设置类

<span id="O" )"="">O</span>

需要：

<span id="O" class="0")"="">O</span>

（理想情况下使用class或id - 而不是两者）

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

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

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

而不是执行indexOf次检查

Javascript - EventListener对双方整个范围的点击作出反应

1 个答案: