复选框事件侦听器未触发

斯蒂芬

我的页面中有许多复选框。这些复选框用于通过 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- 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 地图的图层数组。每个位置对应不同的层。当我切换复选框时，该功能似乎没有触发，我不知道为什么。

艾伦。

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

所以改变

  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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。