How do I get my layer checkboxes to update layer visibility?

[ChrisSergent]

I am trying to use this sample to toggle layers: Toggle layer visibility | ArcGIS API for JavaScript  but I receive this error message:

TypeError: Cannot read property 'on' of null {stack: (...), message: "Cannot read property 'on' of null"}

1. message: "Cannot read property 'on' of null"
2. stack: (...)
3. get stack: function () { [native code] }
4. set stack: function () { [native code] }
5. __proto__: Error

"in domReady callback"

"TypeError: Cannot read property 'on' of null

and here is my code:

var visibleLayerIds = [];
    on(dom.byId("lyrSigns"), "change", updateLayerVisibility);
    on(dom.byId("lyrSupports"), "change", updateLayerVisibility);


    function updateLayerVisibility() {
        var inputs = query(".list_item");
        var inputCount = inputs.length;
               


        for (var i = 0; i < inputCount; i++) {
            if (inputs.checked) {
                visibleLayerIds.push(inputs.value);
            }
        }


        if (visibleLayerIds.length === 0) {
            visibleLayerIds.push(-1);
        }


        layer.setVisibleLayers(visibleLayerIds);
    }

And here is my project on github: csergent45/streetSigns · GitHub

[ChrisSergent]

I appreciate everyone's help. Thanks to everyone for your help. I clicked like and helpful to give you all points. Here is the final code that I came up with:

on(dom.byId("lyrSigns"), "change", updateSignLayerVisibility);
    on(dom.byId("lyrSupports"), "change", updateSupportLayerVisibility);





    function updateSignLayerVisibility() {
        if (document.getElementById('lyrSigns').checked) {
            app.signLayer.setVisibility(true);
        } else {
            app.signLayer.setVisibility(false);
        }
    }


    function updateSupportLayerVisibility() {
        if (document.getElementById('lyrSupports').checked) {
            app.supportLayer.setVisibility(true);
        } else {
            app.supportLayer.setVisibility(false);
        }
    }

I was hoping for a single loop, but this works.

[RobertScheitlin__GISP]

Chris,

  Seems like you could lessen your code a little by doing this:

    on(dom.byId("lyrSigns"), "change", updateLayerVisibility); 
    on(dom.byId("lyrSupports"), "change", updateLayerVisibility); 

    function updateLayerVisibility() { 
        if (document.getElementById('lyrSigns').checked) { 
            app.signLayer.setVisibility(true); 
        } else { 
            app.signLayer.setVisibility(false); 
        }
        if (document.getElementById('lyrSupports').checked) { 
            app.supportLayer.setVisibility(true); 
        } else { 
            app.supportLayer.setVisibility(false); 
        }
    }

[ChrisSergent]

Awesome! That worked nicely.

[RobertScheitlin__GISP]

Chris,

  Even better:

    on(dom.byId("lyrSigns"), "change", updateLayerVisibility); 
    on(dom.byId("lyrSupports"), "change", updateLayerVisibility); 

    function updateLayerVisibility() { 
        app.signLayer.setVisibility(document.getElementById('lyrSigns').checked);
        app.supportLayer.setVisibility(document.getElementById('lyrSupports').checked); 
    }

[ChrisSergent]

Very nice. So this is setting visibility based on the value of checked. Is that correct?

[RobertScheitlin__GISP]

Correct

[LianaSmith]

Hi Robert,

I tried using your code but I get an error that "0x800a1391 - JavaScript runtime error: 'on' is undefined" However i defined "on" in my default file like this " dojo.require("dojo/on");"

Should I declare it differently? Thanks!

[RobertScheitlin__GISP]

Liana,

  Normally you would just add dojo/on to your main requires in your app but if you do a separate require then your code that uses dojo on has to be inside the requires function.

require(["dojo/on"], function(on){
   //Now you can use "on"
});‍‍‍

[roemhildtg]

Your input's id is actually lyrSupport but you're looking for lyrSupports.

In index.html:

<input type="checkbox" id="lyrSupport" checked value="1" />    Supports

Change lyrSupport to lyrSupports.

[StevenGraf1]

I just replied to your other post and then saw this one.  Here was my response:

I checked out your toggle layer code and the code that you pulled from is using DynamicMapService found here Toggle layer visibility | ArcGIS API for JavaScript

In your application you are using feature layers.  I am using feature layers and toggling like this:

var layer1 = new FeatureLayer("https://myurl/MapServer/1",{  
          mode: FeatureLayer.MODE_ONDEMAND,  
          outFields: ["*"],  
          infoTemplate: template  
        });  
  
  var checkBox = new CheckBox({  
  name: "checkBox1",  
  value: "agreed",  
  checked: false,  
  onChange: function(b){  
  if (b == true) {  
  map.addLayer(layer1);  
  } else {  
  map.removeLayer(layer1);  
  } }  
  }, "checkBox1").startup();

Be sure to call the "dijit/form/CheckBox", module with function(CheckBox)

1. <input type='checkbox' id='checkBox1' value=1 />Layer1<br />

Hope this helps you out with that issue.

Steven