无法使用表格属性创建有效的嵌套数组(Vanilla JS)

时间:2019-12-19 19:30:54

标签: javascript arrays dom multidimensional-array html-table

我尝试制作一个游戏-“ Cross and circle”。 我希望在每次单击后都将单击位置旁边的值放入一个空的嵌套数组中。

这是相关代码:

let table = document.getElementById("table");
let counter = 0;
let arr = [
  [],
  []
];
let win = 0;


table.addEventListener("click", function(e) {
  let r = parseInt(e.target.parentElement.rowIndex);
  let c = parseInt(e.target.cellIndex);

  if (counter % 2 == 0) {
    e.target.classList.add("cross");
    arr[c][r] = 1;
  } else {
    e.target.classList.add("cricle");
    arr[c][r] = 2;
  }

  counter++;
  
  console.log(arr);
})
#table { border-collapse: collapse; }
td { padding: 20px; border: 1px solid black; }
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

  • 如果单击col:0,行:0-由于某种原因,在数组中它将位于位置“ 1,0”。无论您单击哪个单元格,这都是错误的。

  • 如果单击第3列,则总是会出现此错误:“无法设置未定义的属性'0' 在HTMLTableElement”。

表格的外观如下: https://i.imagesup.co/images2/912bc616f03df0e6a75509d7ce36b17e1a2fbbfb.png

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

您在此处用let arr = [[],[]];定义一个数组。 然后使用arr[c][r] = 1;arr[c][r] = 2;

设置一个值

因此,当单击第3列时,您想为arr[2][r]...分配内容。 在这种情况下,数组的长度仅为2。([[],[]]) (arr[0][r]arr[1][r]正在运行...)

因此arr[2][r]未定义。