学习Javascript - 两种选择都可以轻松收听onclick事件

Question

我正在学习javascript，我想最好的学习方法是制作TicTacToe游戏(在此之前我制作了其他非常基本的JavaScript(。

我

想知道是否有更简单的解决方案，然后我目前正在尝试做什么。

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

有没有办法我只有一个函数可以检测是否选择了"x"或"o"，然后在该选择之后立即开始另一个函数？(我认为这将是抽出tictactoe板的功能(。

你可以看到我在玩var userChoiceO=document.GetElementById("O");和w .addEventListener("click", userChoice);但我仍在学习，其中一些正在我的脑海中。

如果我朝着正确的方向前进，任何建议都将不胜感激。

以下是我到目前为止得到的一般想法：

var userShape = 'X';
var playerX=document.getElementById("X");
var playerO=document.getElementById("O");
function userChoiceX () {
	userShape = 'X';
}
function userChoiceO() {
	userShape = '0';
}

.XO {
	font-size:70px;
	text-align: center;
	
}
#X {
	color:#ff574f;
	cursor: pointer;
	text-align: center;
	margin-right: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#X:hover {
	font-size:100px;
}
#O {
	color:#8cabec;
	cursor: pointer;
	text-align: center;
	margin-left: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#O:hover {
	font-size:100px;
}

			<p>Click on the shape you would like to play as</p>
			<div class="XO">
				<span id="X" class="X" onclick="userChoiceX()">X</span><span id="O" class="O" onclick="userChoiceO()">O</span>
			</div>

Answer 1

您可以将事件处理程序与两个跨度的父级绑定<div class="XO" onclick="userChoice(event);"> ，

然后，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");
   function userChoice(event) {
  if (event.target.id == 'X')
    return userChoiceX();
  else if (event.target.id == 'O')
   return userChoiceO();
   }
function userChoiceX () {
	userShape = 'X';
}
function userChoiceO() {
	userShape = '0';
}

.XO {
	font-size:70px;
	text-align: center;
	
}
#X {
	color:#ff574f;
	cursor: pointer;
	text-align: center;
	margin-right: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#X:hover {
	font-size:100px;
}
#O {
	color:#8cabec;
	cursor: pointer;
	text-align: center;
	margin-left: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#O:hover {
	font-size:100px;
}

			<p>Click on the shape you would like to play as</p>
			<div class="XO" onclick="userChoice(event);">
				<span id="X" class="X" >X</span><span id="O" class="O" >O</span>
			</div>

Answer 2

将事件委托与 document.addEventListener(( 和 event.target 一起使用。这样，HTML标记就不会混合JavaScript(又名不显眼的Javascript(，并且以这种方式可以减少内存泄漏的问题(例如，在删除带有事件处理程序的元素的情况下(。下面的示例还使用 Element.className 和 String.indexOf(( 来检查所单击元素的类名。

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

.XO {
  font-size: 70px;
  text-align: center;
}
#X {
  color: #ff574f;
  cursor: pointer;
  text-align: center;
  margin-right: 6vw;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}
#X:hover {
  font-size: 100px;
}
#O {
  color: #8cabec;
  cursor: pointer;
  text-align: center;
  margin-left: 6vw;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}
#O:hover {
  font-size: 100px;
}

<p>Click on the shape you would like to play as</p>
<div class="XO">
  <span id="X" class="X">X</span><span id="O" class="O">O</span>
</div>

Answer 3

您可以将该值用作参数。

创建一个名为 userChoice() 的函数，并使其使用变量turn向旋转

所以你的函数变成

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