How can I create and modify multiple SVGs dynamically

Question

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

Answer 1

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)// 😡 2,2,2
}
console.log("B:", b) // 😬 2

you wouldn't expect to have console.log("B:", b) run without an error, but it does, because the scope of var exists outside of the function.

whereas if you use let or const

for (var i=0; i < 3; i++){
  let b = i;
  setTimeout(function(){console.log(b)},1)// 👍 0,1,2
}
console.log("B:", b)  // 👍 throws error

you will have expected behaviour, including an error on the console.log

And because it is a function-vs-block-scope issue, you could move the entire functionality inside a function and call it, which will lock the scope to the function:

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