復選框事件監聽器未觸發

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')
  });

類似地，其他所有聽眾