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

Question

I'm learning javascript and I figured what best way to learn would be to make a game of TicTacToe (I made other very basic JavaScripts before this).

I'm wondering if their is an easier solution then what I'm trying to do at the moment.

I give the user an option if they want to be "x" or "o". I have two separate functions that fire off if they either choose "x" or "o".

Is there a way I can have just one function that can detect whether "x" or "o" was chosen then have another function begin right after that choice? (I'm thinking that it would be the function to draw out the tictactoe board).

You can see I was playing around with the var userChoiceO=document.GetElementById("O"); and w .addEventListener("click", userChoice); but I am still learning and some of this is going over my head.

Any kind of advice would be kindly appreciated if I'm going in the right direction with this.

Here is a general idea of what I got so far:

 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

You can bind the event handler with the parent of the two spans <div class="XO" onclick="userChoice(event);"> ,

then , event.target gives you the clicked span element:

   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

Use event delegation with document.addEventListener() and event.target . That way the HTML markup doesn't have JavaScript mixed-in (aka Unobtrusive Javascript ), and there can be fewer issues with memory leaks that way (eg in case elements with event handlers are removed). The example below also uses Element.className and String.indexOf() to check the class name of the element clicked on.

 //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

You can use the value as an argument..

make one function called userChoice() and make it such that it's turnwise using a variable turn

so your function becomes

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