How to add function dynamically to a checkbox

Question

I have a simple js code, but it doesn't work (no alert when checking the checkbox) what is the prob? :

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

Sebastian Kaczmarek · Accepted Answer · 2020-08-04 06:36:55Z

2

Simply assign the function itself, not a string:

checkbox.onclick = openFiles;

Full example:

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

answered Aug 4, 2020 at 6:36

Sebastian Kaczmarek

8,5254 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Kaczmarek Over a year ago

I'm glad I could help ;)

Hien Nguyen · Accepted Answer · 2020-08-04 06:41:39Z

You can add event handle to dynamic control as

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

Collectives™ on Stack Overflow

How to add function dynamically to a checkbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related