Currently, I am creating numerous SVG elements with the help of leaflet and d3.js. My setup involves a leaflet map, followed by some divs below it, and then a script element where I am populating the map, incorporating data from .json files, and trying to associate event listeners with the divs to add and remove classes to the svg elements. While attempting to gather all the <path> elements that have been created so far to iterate through them and add a class, I seem to be facing difficulties in getting a for loop to function as desired.
var lowlightGisUnfiltered = document.getElementById(mapDivId).getElementsByClassName("gisData");
console.log("unfiltered",lowlightGisUnfiltered, "length", lowlightGisUnfiltered.length);
var transfer = lowlightGisUnfiltered;
console.log("transfer:", transfer, "length:", transfer.length);
var llarray = Array.prototype.slice.call(lowlightGisUnfiltered);
console.log(llarray);
console.log(lowlightGisUnfiltered[1]);
console.log(transfer.item(1));
var lowlightGIS = [];
for(var n = 0; n < lowlightGisUnfilteredArray.length; n++){
console.log("test");
if(llarray[n].classList.contains(selectorClass)) {
lowlightGIS.push(lowlightGisUnfiltered[n])
}
}
The above code produces the following output:
- unfiltered:[](a 580 element HTMLcollection that lists the length at the end as the correct length) length:0
- transfer: [](a 580 element HTMLcollection that lists the length at the end as the correct length) length:0
- [] (empty array)
- undefined
- null
All this code exists below the d3 and leaflet scripts where I am generating the dynamic tags.
I have reviewed several other questions related to HTMLcollections or NodeLists that deal with similar issues, but unfortunately, they did not provide any solutions.
edit: I also attempted using .querySelectorAll, but that only returned an empty array.