Question

我在javascript中制作了一个Knight's Tour游戏。你可以试试here。 （特别是用于再现错误）

错误我在查找读数时遇到了很多麻烦

未捕获的TypeError：无法读取未定义的属性“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 = "♞";

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

Answer 1

边界测试：

 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=='♞') ...
    }
}

Answer 2

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

未定义的HTML元素

2 个答案: