如何使用Javascript中的变量值使用onclick按钮函数更改全局变量的值

艾莉森·李

我是这个平台的新手，刚遇到这样的问题：我想制作一个 9x9 的按钮网格，所以当用户点击坐标为 (x,y) 的按钮时，x 和 y 的值被保存到两个全局变量。下面是我的代码：

但是我测试的时候，不管在哪里点击，clicked_row和clicked_col的值永远是9和9。我想是因为函数只让i和j这两个值等于，它们的值停在了9 for 循环。有没有办法将值 i 和 j 传递给函数？非常感谢。

for (var i = 0; i < 9; i++) {
  for (var j = 0; j < 9; j++) {
    let btn = document.createElement("button");
    btn.innerHTML = ("(").concat((i + 1).toString(), ", ", (j + 1).toString(), ")"); //(i, j)
    btn.className = "button";
    btn.onclick = function() {
      clicked_row = i;
      clicked_col = j;
    };
    document.body.appendChild(btn);
  }
  document.body.appendChild(document.createElement("BR"));
}

水肿

您是正确的，问题是i和j变量由所有function()s共享，因此它们都获得这些变量的最终值，即9.

传统的（ECMAScript中4）的方式来保存当前值是使用在其中传递的当前值的函数i和j：

    for (var i = 0; i < 9; i++) {
      for (var j = 0; j < 9; j++) {
        let btn = document.createElement("button");
        btn.innerHTML = ("(").concat((i + 1).toString(), ", ", (j + 1).toString(), ")"); //(i, j)
        btn.className = "button";
        btn.onclick = function(i, j) {
          return function() {
            clicked_row = i;
            clicked_col = j;
          };
        }(i, j);
        document.body.appendChild(btn);
      }
      document.body.appendChild(document.createElement("BR"));
    }

但是您正在使用let，它提供了一种更简单的方法：用于let定义变量的本地副本（在循环的每次迭代中都是不同的变量）：

    for (var i = 0; i < 9; i++) {
      for (var j = 0; j < 9; j++) {
        let iNow = i, jNow = j;
        let btn = document.createElement("button");
        btn.innerHTML = ("(").concat((i + 1).toString(), ", ", (j + 1).toString(), ")"); //(i, j)
        btn.className = "button";
        btn.onclick = function() {
          clicked_row = iNow;
          clicked_col = jNow;
        };
        document.body.appendChild(btn);
      }
      document.body.appendChild(document.createElement("BR"));
    }

但是 JavaScript 在for循环的情况下为此提供了简写：

    for (let i = 0; i < 9; i++) {
      for (let j = 0; j < 9; j++) {
        let btn = document.createElement("button");
        btn.innerHTML = ("(").concat((i + 1).toString(), ", ", (j + 1).toString(), ")"); //(i, j)
        btn.className = "button";
        btn.onclick = function() {
          clicked_row = i;
          clicked_col = j;
        };
        document.body.appendChild(btn);
      }
      document.body.appendChild(document.createElement("BR"));
    }

与原始代码的唯一区别是更改var为let. 请参阅使用“let”和“var”有什么区别？

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。