How can I create and modify multiple SVGs dynamically-CodePudding

I am adding multiple SVGs dynamically, then modifying each of them. Without an event listener, the map was not being seen. Now, however, the event listener appears to create multiple instances of the last loop, instead of one for each loop, only the last instance gets modified, but multiple times with the same mygroup,svgID.

for (var i=0; i<path.length; i  ) {
    var mygroup = path[i], svgID = "svgMap"   i
    const iSVG = document.createElement("object")
    document.getElementById("summary-mygroup").appendChild(iSVG)
    iSVG.id = svgID
    iSVG.type = "image/svg xml"
    iSVG.data = "Maps/mygroup_basemap.svg"
    iSVG.addEventListener('load', function(){
        createMap(mygroup,svgID)
    })
}

CodePudding user response：

TL;DR:

use const instead of var

const mygroup = path[i], divID = "div"   i, svgID = "svgMap"   i

What you are seeing is due to function() using mygroup, divID , and svgID form the loop's scope which keeps updating until the functions execute (all with the latest value). This happens because the same variable is used.

`var` and `const`/`let` do not behave the same

var scopes to the function, whereas let/const are scoped to the block. (var also gets hoisted, but that's less related to the issue)

so if you run:

for (var i=0; i < 3; i  ){
    var b = i
  setTimeout(function(){console.log(b)},1)//

TL;DR:

var and const/let do not behave the same

`var` and `const`/`let` do not behave the same