Question

表格单元格没有将其 ID 传递到我的函数参数中

2018-07-12

32

javascript html web-applications event-handling event-listener

我的小代码

我正在尝试做什么

我现在正在学习 javascript，初级 Web 开发人员。我正在通过构建一个简单的井字游戏应用程序进行练习。井字游戏表中的每个单元格都有一个从 0 到 8 的 id，当我尝试将该 id 附加到 tileSelected() 函数（用于单击图块时）时，每个单元格的所有 onclick 事件都包含最后一个单元格的 id。（JS 代码 7 到 9）

for(i = 0; i < 9; i++) {
document.getElementById(i.toString()).onclick = function() { tileSelected(i.toString()); }
}

我尝试过的方法

我之前多次更改该代码，将 ID 传递到 onclick 事件的该函数中，但每次都有同样的问题

那么这里的错误是什么？我做错了什么？

Answer 1

正如您声明的 for 循环一样， i 是一个全局变量。当这些循环结束时， i 的值为 9。回调函数被调用时看到的就是这个值 9。如果您使用 for (let i = 0; i < 9; i++) 将变量范围限定在循环中，您会看到改进。

Answer 2

您的 i 值为 9，因此您使用 tileSelected 函数调用 i.toString() ，因此它始终为 9。

您可以使用 this 并传递 id。 this 关键字计算当前执行上下文的 This Binding 的值

tileSelected(this.id);

for(i = 0; i < 9; i++) {
  document.getElementById(i.toString()).onclick = function() { tileSelected(this.id); }
}