使用onClick获取元素的值及其子元素的innerhtml？
使用onClick获取元素的值及其子元素的innerhtml？
提问于 2018-07-14 06:01:42
我试着做一个简单的tictactoe游戏，一开始，我遇到了一个问题。我计划让每个单元格(td)都有一个唯一的值，每个Div都有一个唯一的id。
因此，我的计划是让每个td元素都有一个onClick事件，该元素将这两个值都作为参数。然而，当我尝试做一个更简单的版本时，我只是简单地console.log了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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-14 06:26:39
这里有一些问题。
首先，当您使用HTML属性时，当调用一个处理程序时，this被设置为该处理程序所附加到的元素，但是该处理程序实际上并没有绑定到它所附加到的元素(它仍然绑定到窗口)。如果在完全解析并创建DOM之后附加处理程序，则this将绑定到元素，而不必覆盖通常作为事件处理程序的第一个参数传递的Event。
其次，只有input元素具有value属性，因此在td上设置value属性不会转换为value属性。您可以使用一个值属性来模拟这个过程，或者通过使用.getAttribute()检查自定义的“data-”属性来获得值
我已经修改了您的代码片段，以显示可能的更正：
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;
}<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 data-value="0"><div id="cell-1"></div></td>
<td data-value="0">
<div id="cell-2"></div>
</td>
<td data-value="0">
<div id="cell-3"></div>
</td>
</tr>
<tr>
<td data-value="0">
<div class="cell-4"></div>
</td>
<td data-value="0">
<div class="cell-5"></div>
</td>
<td data-value="0">
<div class="cell-6"></div>
</td>
</tr>
<tr>
<td data-value="0">
<div class="cell-7"></div>
</td>
<td data-value="0">
<div class="cell-8"></div>
</td>
<td data-value="0">
<div class="cell-9"></div>
</td>
</tr>
</table>
<div id="resetButton">
<button>Reset</button>
</div>
</div>
<script src="./antonvers.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51333321
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号