Слушатель событий флажка не срабатывает

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 - номер флажка / положение слоя в массиве mapLayers, и el_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

На самом деле в коде вы не передаете function в качестве второго параметра в addEventListener.toggleOpacity(value, el_id) вернет и значение, и оно будет установлено как переменная undefined, но не toggleOpacity

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

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

на

  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

Потому что вы звоните toggleOpacity(value, el_id), и это ничего не возвращает.Таким образом, вы передаете undefined в качестве обратного вызова для вашего addEventListener.Попробуйте так:

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

Вам нужно передать функцию.Если вы вызываете функцию, вы передаете возвращаемое значение функции.