javascript - 在循环中创建多个 Canvas ，仅调用最后一个函数

Question

下面的代码创建多个带有相关输入框的 Canvas 。

问题是运行代码后只有最后一个 Canvas 及其输入框可以工作。

var art = function() {
  for (var i = 1; i <= 3; i++) {
    var div = document.createElement("div");
    var inpbx = document.createElement('input');
    var canvas = document.createElement('canvas');
    document.getElementById("bx").appendChild(div);
    div.appendChild(inpbx);
    div.appendChild(canvas);
    canvas.style = "border:1px solid gray; height:100px";
    var updateCanvas = function() {
      var ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, 300, 300);
      ctx.font = "30px Arial";
      ctx.fillText(inpbx.value, 10, 50);
    };
    inpbx.addEventListener("change", updateCanvas, false);
  }
};

<button onClick="art()">Do some</button>
<div id="bx"></div>

Answer 1

这是因为您创建的所有函数都指向同一个变量i。最终等于4。为了避免这种情况，您可以将循环体包装在函数中:

var art = function() {
  for (var i = 1; i <= 3; i++) {
    (function (i) {
      var div = document.createElement('div');
      var inpbx = document.createElement('input');
      var canvas = document.createElement('canvas');

      document.getElementById('bx').appendChild(div);
      div.appendChild(inpbx);
      div.appendChild(canvas);

      canvas.style = 'border:1px solid gray; height:100px';

      var updateCanvas = function() {
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, 300, 300);
        ctx.font = '30px Arial';
        ctx.fillText(inpbx.value, 10, 50);
      };

      inpbx.addEventListener('change', updateCanvas, false);
    })(i)
  }
};

在 ES6 中，您只需将 var i = 1 更改为 let var i = 1。