Créer plusieurs canevas dans une boucle, seule la dernière fonction est appelée

Question

Le code ci-dessous crée plusieurs canevas avec des zones de saisie relatives.

Le problème est que, après l'exécution du code, seul le dernier canevas et sa boîte de saisie fonctionnent.

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

C'est parce que toutes les fonctions que vous créez le point à la même variable i. Ce qui à la fin est égal à 4. Pour éviter que vous pouvez envelopper le corps de la boucle dans une fonction:

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) 
    } 
}; 

En ES6 vous pouvez simplement changer var i = 1-let var i = 1.