Question

下面的代码会创建多个带有相对输入框的画布。

问题是在运行代码后，只有最后一个画布和它的输入框正在运行。

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。

在循环中创建多个画布，只调用最后一个函数

1 个答案: