javascript - oninput 函数在 window.onload 后未触发

Question

我有一个名为的对象MYMODCLASS，其中包含我的所有模块functions。其中一个函数addNumberValues(id, getId)使用该方法遍历一组数字输入，getElementsByName并添加值以检查值是否小于 100。

当我使用以下符号调用该函数时：

window.onload = document.getElementsByName('grade').oninput = MYMODCLASS.addNumberValues('info', 'grade');

该函数仅在文档加载时触发一次，但不会再次触发。

当我将它作为输入元素的参数调用时，它始终如一地工作：

<input type="number" value=0 id="ind" name="grade" min="0" max="100" oninput="MYMODCLASS.addNumberValues('info', 'grade')" required>
<input type="number" value=0 id="nv" name="grade" min="0" max="100" oninput="MYMODCLASS.addNumberValues('info', 'grade')" required>

后一种调用的问题是我必须重复oninput参数 30 次。因此，我想对 ``addNumberValues 函数使用前一个调用。

MYMODCLASS.addNumberValues = function (id, getId) {
    var element = document.getElementById(id);
    var el = document.getElementsByName(getId);
    var i = 0;
    el.forEach((ite) => {
        console.log(ite.value);
        if (!isNaN(parseFloat(ite.value)) && isFinite(ite.value)) {
            if (i === 0) {
                i = parseFloat(ite.value);
            } else {
                i = parseFloat(i) + parseFloat(ite.value);
            }
        }
    })
    console.log(i);
    if (i > 100 || i < 0) {
        element.className = 'lbwarn';
        element.innerText = i;
        alert("Grade exceeds 100!")
    } else {
        element.className = 'lbinfo';
        element.innerText = i;
    }
};

编辑
所以在阅读了评论后，我决定创建一个循环，通过 id 为每个单独的元素设置函数。但这仍然行不通。

window.onload = function() {
    var numel = document.getElementsByName('grade');
    numel.forEach((p) => {
         console.log(p.id);
         document.getElementById(p.id).oninput = MYMODCLASS.addNumberValues('info', 'grade');
    })
}

如何使用我的最后一种方法使调用始终如一地工作？

标签： javascriptinputjavascript-objectsdom-eventsnodelist