仅在第一个选择器上进行DOM操作

Question

构建非常基本的TicTacToe：单击所需的单元格；然后单击“确定”。一次代表X，再次代表O，第三次代表空白。 我可以使用一个功能来循环选择，但是无论我在哪里单击，它都只针对第一个单元格。

def getprocess(f):
    def process(x):
        x += 1
        return f(x)  # f is referenced from the enclosing scope.

    return process

myprocess = getprocess(fun) 
myprocess = getprocess(myprocess) 

var choices = ['_','X','O'];
var i = 0;
var cell = document.querySelector("td");

function add(){
 cell.innerHTML= choices[i];
  i++;
    if(i > 2){
  i = 0;
  }
}

td{
  width: 100px;
  height: 100px;
  text-align: center;
  font-size:3em;
 
}

#two, #five, #eight{
  border-right: solid black 1px;
  border-left: solid black 1px
}
#four, #six, #five{
  border-top: solid black 1px;
  border-bottom: solid black 1px
}

Answer 1

将this传递到添加函数，该函数将包含您要单击的当前元素（或单元格）。

var choices = ['_','X','O'];
var i = 0;

function add(cell){
 cell.innerHTML= choices[i];
  i++;
    if(i > 2){
  i = 0;
  }
}

td{
  width: 100px;
  height: 100px;
  text-align: center;
  font-size:3em;
 
}

#two, #five, #eight{
  border-right: solid black 1px;
  border-left: solid black 1px
}
#four, #six, #five{
  border-top: solid black 1px;
  border-bottom: solid black 1px
}

<table>
  <tr>
    <td class="cell" id ="one" onclick="add(this)"></td>
    <td class="cell" id="two" onclick="add(this)"></td>
    <td class="cell" id="three" onclick="add(this)"></td>
  </tr>
  <tr>
    <td class="cell" id="four" onclick="add(this)"></td>
    <td class="cell" id="five" onclick="add(this)"></td>
    <td class="cell" id="six" onclick="add(this)"></td>
  </tr>
  <tr>
    <td class="cell" id="seven" onclick="add(this)"></td>
    <td class="cell" id="eight" onclick="add(this)"></td>
    <td class="cell" id="nine" onclick="add(this)"></td>
  </tr>
</table>