[英]JavaScript Uncaught TypeError: Cannot set property '-1' of undefined
I'm practicing jquery and am trying to build a very basic Tic Tac Toe game. 我正在练习jquery,并试图构建一个非常基本的Tic Tac Toe游戏。
I'd like to set my html table equivalent to the indexes of an grid in array form and change their values depending on the player's click. 我想将我的html表设置为数组形式的网格索引,并根据玩家的点击更改其值。 Currently I have the color change depending on turn working, but I keep getting this Uncaught TypeError referencing the line that says
board[row][col] = x
in my conditional statement. 目前,我会根据转弯的工作情况改变颜色,但是在我的条件语句中,我不断得到Uncaught TypeError的引用,该行引用的是
board[row][col] = x
。
My code: 我的代码:
$(document).ready(function(event) {
var count = 0;
var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
var row = $(this).parent().index();
var col = $(this).index();
$('td').click(function() {
// if count is even, player 1 is yellow
// if count is odd, player 2 is blue
if (count % 2 === 0) {
$(this).addClass('yellow');
count++;
board[row][col] = 1;
} else {
$(this).addClass('blue');
count++;
board[row][col] = 2;
}
});
});
relevant html: 相关的html:
<div id="main_container">
<h1 id="main_heading" class="heading" >Tic! Tac! Toe!</h1>
<h2 id="winning"></h2>
<table>
<tbody>
<tr class="box_row" >
<td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>
<td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>
<td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
</tr>
<tr class="box_row">
<td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>
<td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>
<td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
</tr>
<tr class="box_row">
<td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>
<td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>
<td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
</tr>
</tbody>
</table>
</div>
relevant css: 相关的CSS:
.yellow {
background-color: #ffc300;
}
.blue {
background-color: #73d2c9;
}
The problem is where you are reading the index values, you need to read it inside the click handler 问题是您正在读取索引值,您需要在点击处理程序中读取它
$(document).ready(function (event) {
var count = 0;
var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
//here this is the document object
$('td').click(function () {
//reading index values should be inside the click handler, here `this` refers to the clicked `td` element
var row = $(this).parent().index();
var col = $(this).index();
// if count is even, player 1 is yellow
// if count is odd, player 2 is blue
if (count % 2 === 0) {
$(this).addClass('yellow');
count++;
board[row][col] = 1;
} else {
$(this).addClass('blue');
count++;
board[row][col] = 2;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.