复选框事件监听器未触发

Question

我的页面上有许多复选框。 这些复选框用于通过Javascript函数切换图层的可见性。

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

我为每个复选框都有一个事件侦听器，以检查是否有更改，如果更改，将toggleOpacity(value, el_id)函数toggleOpacity(value, el_id)函数需要2个参数， value -mapLayers数组中的复选框编号/层位置，以及el_id复选框的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'));
});

该功能通过更改不透明度来切换图层的可见性。 它还将Z值1和所有其他层的值都指定为0，以便最后切换的层将位于顶部（可见）。 mapLayers.length等于6，与复选框的数量相同。

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是OpenLayers地图的图层数组。 每个位置对应一个不同的层。 当我切换一个复选框时，该功能似乎没有启动，我也不知道为什么。

Answer 1

您没有添加事件，而是在调用它。

所以改变

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

至

  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> 

Answer 2

实际上，在代码中，您没有将function作为第二个参数传递给addEventListener 。 toggleOpacity(value, el_id)将返回一个值，并将其设置为undefined变量，但不会设置为toggleOpacity

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

Answer 3

因为您正在调用toggleOpacity(value, el_id) ，但它不会返回任何东西。 因此，您将undefined作为回调传递给addEventListener。 尝试这样：

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

您需要传递一个函数。 如果调用该函数，则传递该函数的返回值。

Answer 4

尝试：

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

类似地，其他所有听众