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

我试图做一个简单的Tictatcoe游戏，一开始，我遇到了一个问题。我计划为每个表单元格（td）提供一个唯一的值，并为其中的每个Div提供一个唯一的id

因此，我的计划是在每个td元素上都有一个onClick事件，它将这两个值都作为参数。然而，当我尝试做一个更简单的版本时，我只是简单地控制台.log'd，我得到的td元素的值都是未定义的。所以我想知道这个代码有什么问题

函数值切换（子、父）{
console.log（parent.value）
//此函数获取子节点和父节点的值，然后记录paret节点的值。
}
函数playerGo（num）{
如果（数量%2）{
this.innerHtml=“X”
}
否则{
this.innerHtml=“O”
}
//此函数指示谁将执行此操作，允许值切换为
//将正确的值设置为下一步单击的内容
}
函数重置（）{
//这将重置游戏
}
函数didYouWin（）{
//检查玩家是否在每次移动时都赢了
}

#游戏{
保证金：自动；
}
桌子{
背景色：#e6；
宽度：420px；
高度：420px；
左边距：自动；
右边距：自动；
}
运输署{
边框：2.5px纯黑；
高度：140像素；
宽度：140px；
文本对齐：居中；
垂直对齐：中间对齐；
字号：80px；
}
#细胞-1{
}
#细胞-2{
}
#细胞-3{
}
#细胞-4{
}
#细胞-5{
背景色：
}
#细胞-6{
背景色：
}
#细胞-7{
背景色：
}
#细胞-8{
背景色：
}
#细胞-9{
背景色：
}

安东游戏
玩家：
X
X
O
X
O
X
O
O
X
O
重置

使用

console.log（parent.getAttribute（'value'））

而不是

parent.value

从MDN：

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

使用

console.log（parent.getAttribute（'value'））

而不是

parent.value

从MDN：

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

---

这里有一些问题

首先，当您使用HTML“onclick”属性时，当调用处理程序时，此设置为处理程序所附加到的元素，但该处理程序实际上并未绑定到它所附加到的元素（它仍然绑定到窗口）。如果在完全解析HTML并创建DOM后附加处理程序，则此将绑定到元素，并且不必重写通常作为事件处理程序的第一个参数传递的

事件

其次，只有

input

元素具有值属性，因此在

td

上设置值属性不会转换为值属性。您可以使用

数据-

属性来模拟此操作，或者通过使用

.getAttribute（）

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

var-player=1；
函数值切换（事件）{
//此函数获取子节点和父节点的值，然后记录paret节点的值。
让div=event.target.getElementsByTagName（'div'）[0]。innerHTML=[“X”，“O”][player%2]；
}
函数playerGo（num）{
如果（数量%2）{
this.innerHTML=“X”
}
否则{
this.innerHTML=“O”
}
//此函数指示谁将执行此操作，允许值切换为
//将正确的值设置为下一步单击的内容
}
函数重置（）{
//这将重置游戏
}
函数didYouWin（）{
//检查玩家是否在每次移动时都赢了
}
document.addEventListener（“DOMContentLoaded”，function（））{
对于（让document.queryselectoral的td（“board td”））{
td.onclick=valueToggle；
}
});
#游戏{
保证金：自动；
}
桌子{
背景色：#e6；
宽度：420px；
高度：420px；
左边距：自动；
右边距：自动；
}
运输署{
边框：2.5px纯黑；
高度：140像素；
宽度：140px；
文本对齐：居中；
垂直对齐：中间对齐；
字号：80px；
}

安东游戏
玩家：
X
重置
这里有一些问题

首先，当您使用HTML“onclick”属性时，当调用处理程序时，此

设置为处理程序所附加到的元素，但处理程序实际上没有绑定到它所在的元素