动态添加的功能无法正常运行JavaScript

Question

I'm trying to create a table made out of user inputs, with those inputs including checkboxes. I have a function for what to do when the box is clicked

function checkTheBox(t)  {           
  var t;
    if (array[t] == 0) {
      array[t] = 1;
    }
    else {
      array[t] = 0;
    }
}

and to add that function to the created elements of the table I use

function add() {
  var word = document.getElementById("text").value;
  var tdt = document.createElement("td");
  var tdc = document.createElement("td")
  var node = document.createTextNode(word);
  var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "cb";
    tdc.addEventListener("click", ticker(0), false);
    tdc.stopPropagation;
  tdt.appendChild(node);
  tdc.appendChild(checkbox);
  var tr = document.createElement("tr");
  tr.appendChild(tdt);
  tr.appendChild(tdc);
  var table = document.getElementById("vt");
  table.appendChild(tr);
}

The problem is that whenever I click on the Add button to create the new element it activates the function and then creates the element and the checkbox does nothing when I click on it.

I use the checkTheBox function in the first place because the only other way I've read of dealing with checkboxes is with PHP, which I have yet to delve into.

Answer 1

You're executing ticker(0) immediately, rather than telling it to execute when tdc is clicked.

Here...

tdc.addEventListener("click", ticker(0), false);

That will assign the result of executing ticker(0) to the click event handler. You can wrap it in an anonymous function so that it is only executed later...

tdc.addEventListener("click", function() { ticker(0); }, false);

Have a look at the documentation here for some examples...

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Search that page for "anonymous function"