如何在 Unobtrusive Javascript onclick 分配中使用变量？ [复制]答案

【问题标题】：How to use variables in an Unobtrusive Javascript onclick assignment? [duplicate]如何在 Unobtrusive Javascript onclick 分配中使用变量？ [复制]
【发布时间】：2020-11-06 20:34:18
【问题描述】：

我正在尝试将 onclicks 分配给第一行中的 td，以便单击第一个 TD 输出“1”，单击第二个 TD 输出“2”，等等。

问题是，当我实际点击调用 onclick 时，我总是得到“3”，因为那是 onclick 使用的变量的最后一个值。

有没有办法让每次点击都返回我想要的唯一数字？

window.onload = function() { //Wait for the DOM to load.
    table = document.getElementById('myTable');
      for (i = 0; cell = table.rows[0].cells[i]; i++) {
        console.log(i); // logs 0, 1, 2
        cell.onclick=function(){ console.log(i);} // Want to get 0,1, or 2, but always get 3.
    }
}

<table id=myTable>
    <tr>
        <td>COL1</td>
        <td>COL2</td>
        <td>COL3</td>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
</table>

【问题讨论】：

标签： javascript unobtrusive

【解决方案1】：

那是因为i 值正在查找最近的闭包变量，如果没有找到，那么它将是全局的。在您的代码中，它是全局的并且在循环结束之前发生了变异。

只需将i 本身作为块范围变量

for (let i = 0; cell = table.rows[0].cells[i]; i++) {

或者将它分配给另一个，在下面的例子中，它是idx。

<table id=myTable>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
</table>

<script>
  window.onload = function() { //Wait for the DOM to load.
    table = document.getElementById('myTable');
    for (i = 0; cell = table.rows[0].cells[i]; i++) {
      console.log(i); // logs 0, 1, 2
      let idx = i;
      cell.onclick = function() {
        console.log(idx);
      } // Want to get 0,1, or 2, but always get 3.
    }
  }
</script>

【讨论】：

为什么不let i = 0;？
@hev1 无论如何，他认为合适。我将编辑以提供let i
谢谢。您的代码与我的代码存在相同的问题，但您的解释向我展示了如何解决它。（应该是 console.log(idx)，而不是 console.log(i)。）
@MichaelBluejay 啊哈，我打印了i 而不是idx。无论如何，很高兴你得到了。