创建 <input> 元素时，添加后的 onchange 不是它的一部分

Question

我在 table 中添加了一些元素。有一个函数可以添加（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>

创建 <input> 元素时，添加后的 onchange 不是它的一部分

When creating an <input> element, onchange after adding is not part of it

html

javascript

onchange

appendchild