CODEWITHSUNDEEP
javascript
ndduong
ndduong

Reputation: 439

How do you create onchange event for checkbox in javascript?

I have the following snippets of code.

function createTable(channelArr, id) {
  console.log(channelArr)
  var table = document.getElementById("channelsTable");
  for (i = 0; i < channelArr.length; i++) {
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    let inverseIndex = channelArr.length - 1 - i
    cell1.innerHTML = "# " + channelArr[inverseIndex].name
    var checkbox = '<input type="checkbox" onclick="toggleCheckbox()" id="complete" checked="false">';
    cell2.innerHTML = checkbox
    if (channelArr[i].members.indexOf(id) != -1) {
      document.getElementById("complete").checked = true;
    }
  }
}

function toggleCheckbox() {
  console.log("clicked")
}

Each checkbox in table has an onchange handler (toggleCheckbox). However, when I tried clicking on the checkbox I get the following error. 

Uncaught ReferenceError: toggleCheckbox is not defined at HTMLInputElement.onclick (pick_channels?token=...)

Any help on this situation would be greatly appreciated.

Upvotes: 2

Views: 2842

Answers (2)

ndduong
ndduong

Reputation: 439

I changed my code to this and it works.

function createTable(channelArr, id) {
  console.log(channelArr)
  var table = document.getElementById("channelsTable");
  for (i = 0; i < channelArr.length; i++) {
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    let inverseIndex = channelArr.length - 1 - i
    cell1.innerHTML = "# " + channelArr[inverseIndex].name
    var checkbox = document.createElement("INPUT");
    checkbox.type = "checkbox";
    checkbox.onchange = () => checkClicked(inverseIndex);
    if (channelArr[i].members.indexOf(id) != -1) {
      checkbox.checked = true
    }
    cell2.appendChild(checkbox)
  }
}

Upvotes: 1

Dan Heller
Dan Heller

Reputation: 584

You can use the reference you already got to define if it should be checked and bind the event:

var checkbox = '<input type="checkbox" id="complete" checked="false">';
document.getElementById('container').innerHTML = checkbox;
checkbox = document.getElementById("complete");
checkbox.checked = false;
checkbox.onclick = toggleCheckbox.bind(this);

Upvotes: 0

Related Questions