复选框事件侦听器未触发

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) 函数，该函数接受 2 个参数，value - 复选框 number/layer 在 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，和checkbox的个数一样

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

因为您正在调用 toggleOpacity(value, el_id) 而它 return 没有任何意义。因此，您将 undefined 作为回调传递给您的 addEventListener。像这样尝试：

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

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

Answer 2

尝试：

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

对所有其他听众进行类比

Answer 3

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

所以改变

  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>

Answer 4

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

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

复选框事件侦听器未触发

Checkbox event listener not firing

html

javascript

openlayers