javascript - 使用 onclick 捕获所有下拉/选择元素值并插入 html 总计字段

Question

我们使用的 html 测验应用程序不包含下拉/选择元素的总计字段。我想插入一个 html div 总计，以捕获所有带有值的选择元素，同时使用单击捕获更改。我在搜索时找到了一些解决方案，但似乎无法将它们全部放在一起。我无法将事件监听器直接插入到 html 中。

到目前为止我所拥有的。感觉我很接近，但收到的 x[i] 未定义。

var x = document.getElementsByTagName("select");
var i = 1;
sum = 0;
for (i; i < x.length; i++) {
    x[i].addEventListener("click", function(){
    sum += Number(x[i].value);
});
}

所有下拉菜单都在同一个重复类中:

<select class="qm_SELECT_sel"><option value=""></option>

Answer 1

您得到的 x[i] 为未定义，因为 click Even 与所有选择元素绑定(bind)，但在 i 中触发 click 事件时，它总是传递 i 的最后一个有效值例如:如果您有 3 个下拉菜单，那么它将单击其中 3 个下拉菜单的事件，但在单击任何下拉菜单时，它总是传递 3。

要忽略这一点，您必须将该事件绑定(bind)到单独的函数，并将元素作为参数传递给该函数，以这种方式维护每个 i 的值

var x = document.getElementsByTagName("select");
var i = 1;
sum = 0;
for (i; i < x.length; i++) {
    bindSelectClick(x[i]);
}
function bindSelectClick(elem){
 elem.addEventListener("click", function(){
    sum += Number(elem.value);
 });
}