学习Javascript-两种选择都可以收听onclick事件的简单方法？

我正在学习javascript，我想最好的学习方法是制作一个TictaToe游戏（在此之前我制作了其他非常基本的Java脚本）

我想知道他们的解决方案是否比我现在要做的更简单

我给用户一个选项，如果他们想成为“x”或“o”。我有两个单独的函数，如果它们选择“x”或“o”，它们就会启动

有没有一种方法可以让我只使用一个函数来检测是否选择了“x”或“o”，然后在选择之后立即开始另一个函数？（我认为这将是绘制Tictatcoe板的功能）

您可以看到我在玩

var userChoiceO=document.GetElementById（“O”）

和w

.addEventListener（“单击”，用户选择）但我仍在学习，其中的一些内容超出了我的想象

如果我在这方面做得对，任何建议都将不胜感激

以下是我到目前为止的大致情况：


var userShape='X'；
var playerX=document.getElementById（“X”）；
var playerO=document.getElementById（“O”）；
函数userChoiceX（）{
userShape='X'；
}
函数userChoiceO（）{
userShape='0'；
}
.XO{
字体大小：70px；
文本对齐：居中；
}
#X{
颜色：#ff574f；
光标：指针；
文本对齐：居中；
保证金权利：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#X:悬停{
字体大小：100px；
}
#O{
颜色：#8cabec；
光标：指针；
文本对齐：居中；
左边距：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#O:悬停{
字体大小：100px；
}
单击您想要播放的形状

XO
您可以将该值用作参数

创建一个名为
userChoice（）
的函数，并使用变量
turn

所以你的函数变成了

turn = 'X'
function userChoice(){
   userShape = turn
   if(turn == 'X'){
     turn = 'Y'
   }
   else{
     turn = 'X'
   }
}

您可以将该值用作参数

创建一个名为
userChoice（）
的函数，并使用变量
turn

所以你的函数变成了

turn = 'X'
function userChoice(){
   userShape = turn
   if(turn == 'X'){
     turn = 'Y'
   }
   else{
     turn = 'X'
   }
}

您可以将事件处理程序与两个跨度的父级绑定

然后，
event.target
为您提供单击的span元素：

   function userChoice(event) {
      if (event.target.id == 'X')
        return userChoiceX();
      else if (event.target.id == 'O')
       return userChoiceO();
   }


var userShape='X'；
var players=document.querySelector（“.XO”）；
函数userChoice（事件）{
如果（event.target.id='X'）
返回userChoiceX（）；
else if（event.target.id='O'）
返回userChoiceO（）；
}
函数userChoiceX（）{
userShape='X'；
}
函数userChoiceO（）{
userShape='0'；
}
.XO{
字体大小：70px；
文本对齐：居中；
}
#X{
颜色：#ff574f；
光标：指针；
文本对齐：居中；
保证金权利：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#X:悬停{
字体大小：100px；
}
#O{
颜色：#8cabec；
光标：指针；
文本对齐：居中；
左边距：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#O:悬停{
字体大小：100px；
}
单击您想要播放的形状

XO
您可以将事件处理程序与两个跨度的父级绑定

然后，
event.target
为您提供单击的span元素：

   function userChoice(event) {
      if (event.target.id == 'X')
        return userChoiceX();
      else if (event.target.id == 'O')
       return userChoiceO();
   }


var userShape='X'；
var players=document.querySelector（“.XO”）；
函数userChoice（事件）{
如果（event.target.id='X'）
返回userChoiceX（）；
else if（event.target.id='O'）
返回userChoiceO（）；
}
函数userChoiceX（）{
userShape='X'；
}
函数userChoiceO（）{
userShape='0'；
}
.XO{
字体大小：70px；
文本对齐：居中；
}
#X{
颜色：#ff574f；
光标：指针；
文本对齐：居中；
保证金权利：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#X:悬停{
字体大小：100px；
}
#O{
颜色：#8cabec；
光标：指针；
文本对齐：居中；
左边距：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#O:悬停{
字体大小：100px；
}
单击您想要播放的形状

XO
与和一起使用。这样，HTML标记中就不会混合JavaScript（又称JavaScript），这样就不会出现内存泄漏问题（例如，如果删除了带有事件处理程序的元素）。下面的示例还使用和检查单击的元素的类名


//等待DOM准备就绪
document.addEventListener（'DOMContentLoaded'，函数（domReadyEvent）{
//观察文档上的单击
document.addEventListener（'click'，函数（clickEvent）{
if（clickEvent.target.className.indexOf（'X'）>-1）{
log（'clicked on X'）；
//点击X的手柄
}else if（clickEvent.target.className.indexOf（'O'）>-1）{
log（'clicked on O'）；
//手柄点击O
}
});
});
.XO{
字体大小：70px；
文本对齐：居中；
}
#X{
颜色：#ff574f；
光标：指针；
文本对齐：居中；
保证金权利：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#X:悬停{
字体大小：100px；
}
#O{
颜色：#8cabec；
光标：指针；
文本对齐：居中；
左边距：6vw；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-ms转换：所有0.3秒轻松；
}
#O:悬停{
字体大小：100px；
}
单击您想要播放的形状

XO