How do I make an onclick event for a dynamically added checkbox? (JavaScript)

Question

I'm new to html and learning through YouTube and such. I'm writing a JavaScript which allows me to show a custom window with checkboxes and textboxes (and labels) on it. I disabled the textboxes to begin with, but I would like them to be enabled when the corresponding checkboxes are checked.

I've searched on the internet for a solution, already tried using:

document.getElementById('chb1').onclick = function() { //my function };

or

document.getElementById('chb1').onclick = //my function;

but neither of them works.

function MyCheckboxWindow()
{
    this.render = function(func,titel,dialog,checktext1)
    {
    
        var dialogboxbody = document.getElementById ('dialogboxbody');
        dialogboxbody.innerHTML = dialog + ': <br>';
    
        if(checktext1 != null) 
        {
        
            dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
            + '<label for="txt1">&#8364;</label> <input type="text" id="txt1" value="0,00" disabled>';
            document.getElementById('lbl1').innerHTML = checktext1 + ': ';
            document.getElementById('chb1').onclick = alert('');
        
        }
        else if(!checkboxCheck)
        {
        
            dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
            + '<label for="txt1">&#8364;</label> <input type="text" id="txt1" value="0,00" disabled>';
            document.getElementById('lbl1').innerHTML = "Other: : ";
            document.getElementById('chb1').onclick = Change.ischanged('chb1');
            checkboxCheck = true;
        
        }

        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="CheckboxWindow.ok(\''+func+'\')">Ok</button> <button onclick="CheckboxWindow.cancel()">Cancel</button>';
    
    }

}
var CheckboxWindow = new MyCheckboxWindow();

function CheckboxChanged()
{

    this.ischanged(id)
    {

        alert('');
    }
}
var Change = new CheckboxChanged();

Just for info, there should be 6 of these checkboxes, but I left them out in this example. Also, in the "if", I replaced my function by an alert. The code in the if-clause produces an alertbox only when I open the custom window, clicking the checkbox doesn't do anything (but tick the box).

Writing it like I did in the "else if" in this example, doesn't produce anything at all, nor does function() { Change.ischanged('chb1'); } (like I said before).

Please tell me why this isn't working. There's probably a better way of adding these checkboxes as well, so if you know any, please let me know as well.

Answer 1

Try the OnClick event instead of the OnChange event for the checkbox.

//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);

var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);

//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onclick = function() {
  if(checkbox.checked) { //if the checkbox is now checked
    console.log("checked");
    textbox.disabled = false; 
  }
  else {
    console.log("unchecked");
    textbox.disabled = true; //programmatically disable a textbox
  }
}

<div id='div'></div>

Answer 2

Thanks for your reply and I'm sorry for responding this late, I was quite busy the past 2 weeks and didn't have a lot of time.

I've tried to use your sample code but was unable to make it work. However, I was able to get it working by adding "onclick="Change.ischanged()" to the input in the if statement. I'm sure I tried something like that before, but I probably typed "CheckboxWindow" or "CheckboxChanged" instead of "Change" by mistake.

if(checktext1 != null) 
{

    dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1" onclick="Change.ischanged()"><label for="chb1" class="lbl" id="lbl1"></label>'
    + '<label for="txt1">&#8364;</label> <input type="text" id="txt1" value="0,00" disabled>';
    document.getElementById('lbl1').innerHTML = checktext1 + ': ';

}

I know that adding the objects like this isn't the best way, but I seem to be having trouble trying to achieve my goal in your way.

I also changed "this.ischanged(id)" to "this.ischanged = function()" (I also made it so I don't need to pass the id anymore).

Answer 3

Hope this helps as a starting point:

//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);

var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);

//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onchange = function() {
  if(checkbox.checked) { //if the checkbox is now checked
    console.log("checked");
    textbox.disabled = false; 
  }
  else {
    console.log("unchecked");
    textbox.disabled = true; //programmatically disable a textbox
  }
}

<div id='div'></div>