Question

我正在尝试制作一个简单的tictactoe游戏，开始时，我遇到了一个问题。我打算为每个表单元格（td）分配一个唯一的值，并在其中的每个Div分配一个唯一的ID。

所以我的计划是让每个td元素都具有一个onClick事件，并将这两个值都作为参数。但是，当我尝试做一个更简单的版本时，我只是用console.log'd来获取td元素的值，而这个是不确定的。所以我想知道这段代码有什么问题。

function valueToggle(child, parent){
  console.log(parent. value)
//this function takes the child node and the parents node's value, it then logs the value of the paret node.
}

function playerGo(num){
  if(num % 2){
    this.innerHtml = "X"
}
  else{
    this.innerHtml = "O"
}
//this function wi;; signal who's go it is, allowing the value Toggle to
//set the right value to what is clicked next
}

function reset(){
//this resets the game
}
function didYouWin(){
//CHecks to see if a player has won every time a move is made
}

#game{
  margin: auto;
}

table {
  background-color: #e6e6e6;
  width: 420px;
  height: 420px;
  margin-left: auto;
  margin-right: auto;
}

td {
border: 2.5px solid black;
height: 140px;
width: 140px;
text-align: center;
vertical-align: middle;
font-size: 80px;
}
#cell-1{

}
#cell-2{

}
#cell-3{

}
#cell-4{

}
#cell-5{
  background-color:
}
#cell-6{
  background-color:
}
#cell-7{
  background-color:
}
#cell-8{
  background-color:
}
#cell-9{
  background-color:
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Anton Game</title>

    <link rel="stylesheet" href="./antonvers.css">


</head>

<body>

    <div id="game">
        <div id="player">
            <h2>
                <span id="pShow">Player:</span>
                <span id="pColor">X</span>
            </h2>
        </div>
        <table id="board" cellpadding="0" cellspacing = "0">
            <tr>
                <td onClick = "valueToggle(this.childNode, this)" value = 0>
                    <div id="cell-1">X</div>
                </td>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div id="cell-2">O</div>
                </td>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div id="cell-3">X</div>
                </td>
            </tr>
            <tr>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div class="cell-4">O</div>
                </td>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div class="cell-5">X</div>
                </td>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div class="cell-6">O</div>
                </td>
            </tr>
            <tr>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div class="cell-7">O</div>
                </td>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div class="cell-8">X</div>
                </td>
                <td  onClick = "valueToggle(this.childNodes, this)" value = 0>
                    <div class="cell-9">O</div>
                </td>
            </tr>
        </table>
        <div id="resetButton">
            <button>Reset</button>
        </div>

    </div>


    <script src="./antonvers.js"></script>


</body>

</html>

Answer 1

使用console.log(parent.getAttribute('value'))代替parent.value。

从MDN documentation：

getAttribute（）返回元素上指定属性的值。如果给定的属性不存在，则返回的值将为null或“”（空字符串）；否则为0。

Answer 2

这里有一些问题。

首先，当您使用HTML“ onclick”属性时，将称为this的处理程序设置为该处理程序所附加的元素，但实际上该处理程序并未绑定至其附加的元素（它仍然绑定到窗口）。如果在完全解析HTML并创建DOM之后附加处理程序，this将绑定到该元素，而您将不必覆盖通常作为事件处理程序。

第二，只有Event个元素具有值属性，因此在input上设置值属性将不会转换为值属性。您可以使用td属性进行模拟，或者通过使用data-

检查自定义的“ value”属性来获取值

我已修改您的代码段以显示可能的更正：

.getAttribute()

var player = 1;

function valueToggle(event){
//this function takes the child node and the parents node's value, it then logs the value of the paret node.
  let div = event.target.getElementsByTagName('div')[0].innerHTML = ["X","O"][player%2];
}

function playerGo(num){
  if(num % 2) {
    this.innerHTML = "X"
  }
  else {
    this.innerHTML = "O"
  }
//this function wi;; signal who's go it is, allowing the value Toggle to
//set the right value to what is clicked next
}

function reset(){
//this resets the game
}
function didYouWin(){
//CHecks to see if a player has won every time a move is made
}

document.addEventListener("DOMContentLoaded", function() {
    for (let td of document.querySelectorAll("#board td")) {
        td.onclick = valueToggle;
    }
});

#game{
  margin: auto;
}

table {
  background-color: #e6e6e6;
  width: 420px;
  height: 420px;
  margin-left: auto;
  margin-right: auto;
}

td {
border: 2.5px solid black;
height: 140px;
width: 140px;
text-align: center;
vertical-align: middle;
font-size: 80px;
}

通过onClick获得元素的值及其子元素的innerhtml？

2 个答案: