How do you create onchange event for checkbox in javascript?

Question

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.

Checkboxes only have two states, so a change event doesn't really make sense. Try just checking if it's checked — Cruiser
– Cruiser, Commented Feb 11, 2017 at 23:07
Probably a scope issue, but hard to tell if we can't see the markup showing where and how your JS is loaded. Also, where's the change handler being set? — Sarah Groß
– Sarah Groß, Commented Feb 11, 2017 at 23:07
@Connum I put both functions in global of the file. I've also tried moving it inside of each other as well and I still got the same error. Is there another way of checking for checkbox "clicked" event? — ndduong
– ndduong, Commented Feb 11, 2017 at 23:09
You have to pay close attention to error messages that are shown to you. It states clearly that your click event is triggering, but it cannot find the callback function. Again, without a complete code example, it's hard to help you. — Sarah Groß
– Sarah Groß, Commented Feb 11, 2017 at 23:11
The change event handler isn't called until the checked state has been updated. Check this post for more detailed explanation.stackoverflow.com/questions/4471401/… — Hameed Syed
– Hameed Syed, Commented Feb 12, 2017 at 4:00

ndduong · Accepted Answer · 2017-02-12 16:00:43Z

1

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

answered Feb 12, 2017 at 16:00

ndduong

4399 silver badges21 bronze badges

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

Comments

Dan Heller · Accepted Answer · 2017-02-12 03:34:56Z

0

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

answered Feb 12, 2017 at 3:34

Dan Heller

5941 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

How do you create onchange event for checkbox in javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related