3

我用 javascript 制作了一个Knight's Tour游戏。你可以在这里试试。（特别是为了重现错误）

我很难找到读取的错误

未捕获的类型错误：无法读取未定义的属性“innerHTML”

但我不确定为什么它是未定义的。我有一张有 64 个单元格的表格（制作棋盘）。它们都被建造得平淡无奇

<table border=1 style="border: 1px solid black; table-layout: fixed;">
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr><tr>
    ...

这是页面上唯一的表格。我使用 javascript 来检索所有 td 元素，并通过它们进行迭代，为游戏添加 id、类、背景颜色和 onclick eventListeners。

var tds;
window.onload = function() {
    tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        if (typeof window.addEventListener === 'function') {
            (function (td) {
                ...
                td.addEventListener('click', function() {
                    ...

似乎有几个不同的单元会重复发生此错误。有时我可以让单个单元格产生错误，有时我不能。一个可重复的示例是首先移动到最底行，倒数第二个单元格，然后尝试移动到单元格上两个向上，一个从它沿侧面向右移动。

我经常在 onclick 中阅读 innerHTML 属性。我指的是 td 元素的全局 tds 数组。这里基本上是我自己访问它们的所有形式。

if (tds[cell].innerHTML === "") {
if (tds[n].innerHTML === "♞") {
tds[cell].innerHTML = "♞";
tds[target].innerHTML = "♘";
td.innerHTML = "♞";

我真的以为我在阅读有关使用 var 声明变量与不使用它之间的区别时已经弄清楚了，但我无法弄清楚导致此错误的单个 var。任何帮助，将不胜感激。

4

2 回答 2

2

边界测试：

 if (x > 0 && y < 6) { //bottom right

不对，x 条件应该是x < 7; 这是您要避免的右侧栏，而不是左侧栏。

为避免所有重复（以及随后出现此类微不足道的复制粘贴编辑错误的可能性），我建议在 x/y 坐标项中进行位置计算，然后从那里计算单元格索引，而不是在单元格索引中工作并分别检查每个边界。实际上，表格具有rows/cells属性，因此您也不必进行单元格索引计算。例如：

var knight_moves = [[-1, -2], [1, -2], [-2, -1], [2, -1], [-2, 1], [2, 1], [-1, 2], [1, 2]];

for (var i= knight_moves.length; i-->0;) {
    var other_x = x + knight_moves[i][0];
    var other_y = y + knight_moves[i][1];
    if (other_x>=0 && other_x<8 && other_y>=0 && other_y<8) {
        var cell = table.rows[other_y].cells[other_x];
        if (cell.innerHTML=='♞') ...
    }
}
于 2013-09-06T14:49:00.767 回答
1

问题是n此时等于 64。tds数组的总长度是 64（或 0 到 63），并且它会产生错误，因为n表示的元素超出了数组的范围。

于 2013-09-06T14:06:38.677 回答