Как динамически добавить функцию к флажку

Question

У меня простой код js, но он не работает (при установке флажка нет предупреждения) в чем проблема? :

function dynamicCheckbox() {          
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "chkbox";
        checkbox.id = "chkid" ;
        checkbox.style = "width:50px";
        checkbox.onclick = "openFiles()";            
}

function openFiles() {
    alert("hey");
}

Answer 1

Вы можете добавить дескриптор события в элемент управления Dynami c как

document.addEventListener('click',function(e){
       if(e.target && e.target.id== 'chkid'){
            openFiles();
       }
});

function dynamicCheckbox() {          
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "chkbox";
        checkbox.id = "chkid" ;
        checkbox.style = "width:50px";
        //checkbox.onclick = "openFiles()";
        document.addEventListener('click',function(e){
          if(e.target && e.target.id== 'chkid'){
            openFiles();
         }
        });
        
        document.body.appendChild(checkbox);
 
}

function openFiles() {
    alert("hey");
}

dynamicCheckbox();

Answer 2

Просто назначьте саму функцию, а не строку:

checkbox.onclick = openFiles;

Полный пример:

function dynamicCheckbox() {          
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "chkbox";
        checkbox.id = "chkid" ;
        checkbox.style = "width:50px";
        checkbox.onclick = openFiles;
        
        document.body.appendChild(checkbox);
}

function openFiles() {
    alert("hey");
}

dynamicCheckbox();