динамическое создание флажка для запуска функции onclick

Question

У меня есть функция, которая используется для создания флажка для каждого элемента массива.

Проблема, с которой я сталкиваюсь, заключается в попытке создать функцию при ее нажатии, эта функция также должна динамически создаваться из элементов массива, но только кажется, что она получает первый элемент.

function createCheckboxes(markerGroups) { 

    var container = document.getElementById('panel'); 

    for (var i = 0; i < markerGroups.length; i++) { 

     var dataTypeId1 = markerGroups[i]; 
     console.log(dataTypeId1); 

     var checkbox = document.createElement('input'); 
     checkbox.type = "checkbox"; 
     checkbox.name = "chk" + markerGroups[i].dataTypeId; 
     checkbox.value = "value"; 
     checkbox.id = "chk" + markerGroups[i].dataTypeId; 

     checkbox.onclick = function() { 

      console.log(dataTypeId1); 

     }; 

     checkbox.checked = true; 

     var label = document.createElement('label') 
     label.htmlFor = "chk" + markerGroups[i].dataTypeId; 
     label.appendChild(document.createTextNode(markerGroups[i].dataTypeName)); 

     container.appendChild(checkbox); 
     container.appendChild(label); 

    } 

} 

В приведенном выше коде в 2 точках я пишу в журнал. В первый раз создается список идентификаторов, как ожидалось, например.

функция

1001 
1002 
1003 
1004 
1005 

OnClick необходимо получить текущий идентификатор в массиве, но всегда возвращает первый элемент/ID «1001» независимо от того, который CheckBox я нажимаю на.

Answer 1

Изменение функции OnClick для этой

checkbox.onclick = (function(dataType) { 
    return function() { 
     console.log(dataType); 
    }; 
}(dataTypeId1)) 

читать на Javascript Closures, чтобы понять больше