Checkbox event listener not firing

Question

I have a number of checkboxes in my page. These checkboxes are used to toggle the visibility of a layer through a Javascript function.

<input type="checkbox" id="op_checkbox_0">Aerial<br>
<input type="checkbox" id="op_checkbox_1">Aerial (Labels)<br>
<input type="checkbox" id="op_checkbox_2">Road<br>
<input type="checkbox" id="op_checkbox_3">Road On Demand<br>
<input type="checkbox" id="op_checkbox_4">OSM Layer<br>
<input type="checkbox" id="op_checkbox_5">WMS Layer<br>

I have an event listener for each of the checkboxes to check for a change, and if it changes, the toggleOpacity(value, el_id) function is called which takes 2 arguments, value - the checkbox number/layer position in the mapLayers array, and el_id - the checkbox id.

document.addEventListener("DOMContentLoaded", function (event) {
  document.querySelector('#op_checkbox_0').addEventListener('change', toggleOpacity(0,'op_checkbox_0'));
  document.querySelector('#op_checkbox_1').addEventListener('change', toggleOpacity(1,'op_checkbox_1'));
  document.querySelector('#op_checkbox_2').addEventListener('change', toggleOpacity(2,'op_checkbox_2'));
  document.querySelector('#op_checkbox_3').addEventListener('change', toggleOpacity(3,'op_checkbox_3'));
  document.querySelector('#op_checkbox_4').addEventListener('change', toggleOpacity(4,'op_checkbox_4'));
  document.querySelector('#op_checkbox_5').addEventListener('change', toggleOpacity(5,'op_checkbox_5'));
});

The function toggles the visibility of the layer by changing the opacity. It also assigns a Z-value of 1 and all other layers to 0 so that the last toggled layer will be on top (visible). mapLayers.length is equal to 6, the same as the number of checkboxes.

function toggleOpacity(value, el_id){
    console.log('value='+value+' id='+el_id);
    if(document.getElementById(el_id).checked == true){
        console.log('true');
        for(let i = 0; i<mapLayers.length;i++){
        mapLayers[i].set('zIndex', 0);
        }
        mapLayers[value].set('opacity', 1);     
        mapLayers[value].set('zIndex', 1);
        console.log('Box ' + value + 'on!');
    } else if(document.getElementById(el_id).checked == false) {
        console.log('false');;
        mapLayers[value].set('opacity', 0);
    }
}

mapLayers is the layer array of the OpenLayers map. Each position corresponds to a different layer. The function doesn't seem to be firing when I toggle a checkbox, and I have no idea why.

Answer 1

You are not adding an event, you are calling it instead.

so change

  document.querySelector('#op_checkbox_0').addEventListener('change', toggleOpacity(0,'op_checkbox_0'));

To

  document.querySelector('#op_checkbox_0').addEventListener('change', ()=> toggleOpacity(0,'op_checkbox_0'));

document.addEventListener("DOMContentLoaded", function (event) {
  document.querySelector('#op_checkbox_0').addEventListener('change', ()=> toggleOpacity(0,'op_checkbox_0'));
  document.querySelector('#op_checkbox_1').addEventListener('change', ()=> toggleOpacity(1,'op_checkbox_1'));
  document.querySelector('#op_checkbox_2').addEventListener('change', ()=> toggleOpacity(2,'op_checkbox_2'));
  document.querySelector('#op_checkbox_3').addEventListener('change', ()=> toggleOpacity(3,'op_checkbox_3'));
  document.querySelector('#op_checkbox_4').addEventListener('change', ()=> toggleOpacity(4,'op_checkbox_4'));
  document.querySelector('#op_checkbox_5').addEventListener('change', ()=> toggleOpacity(5,'op_checkbox_5'));
});

function toggleOpacity(value, el_id){
   console.log(el_id + "changed")
}

<input type="checkbox" id="op_checkbox_0">Aerial<br>
<input type="checkbox" id="op_checkbox_1">Aerial (Labels)<br>
<input type="checkbox" id="op_checkbox_2">Road<br>
<input type="checkbox" id="op_checkbox_3">Road On Demand<br>
<input type="checkbox" id="op_checkbox_4">OSM Layer<br>
<input type="checkbox" id="op_checkbox_5">WMS Layer<br>