Access Layer Checked Box in ESRI Web Map Template

LisCollins — Sat, 11 Dec 2021 14:54:09 GMT

Hello,

I'm trying to write a JavaScript that accesses a layer that has a checked box in the ESRI Public Information web map template, but I'm not having success.

To figure out what to put in my query selectors, I'm right clicking the checked box in the layers panel to inspect the element and open up the developer console. According to the console, checked boxes should have a div class name of "toc-checkbox icon-check-1".

Error:

But when I write a code to test if this class exists (code below) in main.js, it says the class does not exist (console.log message doesn't appear). I'm also getting an error that says clickLayers.addEventListener is not a function.

Test Code to Access Checked box:

 if (this.config.enablecheckboxclick) {    //created this myself; enabled checkboxclick in defaults.js as true
function mapLoaded () {    
console.log("map loaded"); //show after map loads

function getCheckedLayers() {
console.log("clicked on a checkbox");    //show when click on checkbox in layers panel   
}

var clickLayers = document.getElementsByClassName('div.toc-checkbox'); //check box class name = "div.toc-checkbox"; if i do getElementById("#mapDiv") it works
clickLayers.addEventListener('click', getCheckedLayers, false); //when click on checkbox, call getCheckedLayers
}   
    
    window.addEventListener('load', mapLoaded, false); 
 }

Links:

Link to the GitHub to download template: Esri/public-information-map-template-js · GitHub

Link to the live map showing template: Public Information Map

Background Information:

Novice Developer

How can I access layers that have been checked in the Public Information Template using JavaScript or CSS queries?

Thanks for your help!

topic Access Layer Checked Box in ESRI Web Map Template in ArcGIS JavaScript Maps SDK Questions

Access Layer Checked Box in ESRI Web Map Template