下面的代码会创建多个带有相对输入框的画布。
问题是在运行代码后,只有最后一个画布和它的输入框正在运行。
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>
答案 0 :(得分: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
。