创建 <input> 元素时，添加后的 onchange 不属于其中

Question

我在表格中添加了一些元素。有一个函数可以添加（tr 和 td）这些元素。函数内部有一个部分：for(var i = 0; i < 4; i++) {    cell = document.createElement("td");    row.appendChild(cell);    cellData = document.createElement("input");    cellData.type = "number";    cellData.min = "0"    cellData.max = "7";    cellData.value = "0";    cellData.onchange = "calculate()";    cell.appendChild(cellData);}这将放置 4 个带有输入字段的单元格。我的问题是，onchange 部分不起作用。我知道你可以直接将 onchange 函数添加到输入中。但在这种形式下它不起作用。我知道这是因为当我在浏览器中检查它时它跳过了 onchange 部分：<td><input type="number" min="0" max="7"></td>它只添加了这些。而且我也没有从函数中收到消息：function calculate() {    console.log("something");}有人可以给我解决这个问题吗？感谢您的时间和答复！

Answer 1

更好的

cellData.onchange = calculate;

更好

cellData.addEventListener("change",calculate);

最好的，因为它只有一个事件侦听器：

document.querySelector("#myTable tbody").addEventListener("input",calculate);

例子

const getNum = str => isNaN(str) || str.trim() === "" ? 0 : +str;

const tbody = document.querySelector("#myTable tbody");

const totalSpan = document.getElementById('total');

const calculate = fld => {

  const total = [...tbody.querySelectorAll("[type=number]")].map(fld => getNum(fld.value)).reduce((a, b) => a + b)

  totalSpan.textContent = total;

};

tbody.addEventListener("input", calculate);

const row = document.createElement("tr")

for (let i = 0; i < 4; i++) {

  cell = document.createElement("td");

  cellData = document.createElement("input");

  cellData.type = "number";

  cellData.min = "0"

  cellData.max = "7";

  cellData.value = "0";

  cell.appendChild(cellData);

  row.appendChild(cell);

}

tbody.appendChild(row);

<table id="myTable">

  <tbody>

  </tbody>

</table>

<span id="total"></span>

Answer 2

var row = window.document.createElement('tr');

document.getElementById("content").appendChild(row);

for(var i = 0; i < 4; i++) {

    cell = document.createElement("td");

    row.appendChild(cell);

    cellData = document.createElement("input");

    cellData.type = "number";

    cellData.min = "0"

    cellData.max = "7";

    cellData.value = "0";

    cellData.onchange = calculate ;

    cell.appendChild(cellData);

    

}

function calculate() {

    console.log("something");

}

<div id="content"> </div>