Question

我有一个我正在处理的网站，它接收用户的输入并计算结果。所有表单都是html文本输入表单，并以特定数字输入。

我想使用输入事件来检查用户何时在这6个文本表单中的一个中输入新值。我正在使用的书中的示例JavaScript and JQuery: Interactive Front-End Web Development建议使用带有dom事件处理程序的getElementById方法来执行此操作：

例如：

function doWhatIwantToDo()
{
    //Do something
}

var el = document.getElementById('username');
el.oninput = doWhatIwantToDo;

这很棒，我可以为每个文本表单设置6个唯一的ID，无论如何我都需要这样做以便在我的javascript代码中更改它们的内部html，但是有一些我可以通过使用一个来检查输入班级名称？

我尝试使用getElementsByClassName，但它让我失望，因为它返回了一个对象数组。

我现在想避免使用任何jquery解决方案，因为我现在只想学习vanilla javascript。

编辑/结果：

我喜欢“acbabis”和“mohamedrias”的答案，但本书暗示使用事件监听器是一种较新的方法，并不是所有浏览器都支持。所以现在，我想坚持它所谈论的传统Dom事件处理程序。

“dandavis”回答只是在一个循环中让我意识到可能将一个元素绑定到一个事件处理程序，在循环中，应该实际工作，也许我在循环中犯了错误。

我检查并且愚蠢地我没有使用数组表示法循环返回数组中的每个对象，这就是为什么没有发生的事情。这是我的最终代码：

var test = document.getElementsByClassName("test");

for (var i=0; i < test.length; i++)
{
    console.log( test[i] );
    test[i].onclick = testiness;
}

function testiness ()
{
    alert("Success!");
}

Answer 1

我会document.querySelectorAll为此。

var inputs = document.querySelectorAll('input');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('input', doWhatIWantToDo);
}

这将在页面上找到所有输入元素，并为每个元素添加处理程序。如果您想使用某个类，只需将其添加到所需的输入标记中，然后将document.querySelectorAll('input')替换为document.querySelectorAll('input.classname')。

Answer 2

var inputElements = document.querySelectorAll('.className');
for(var i = 0, len = inputElements.length ; i < len ; i++) {
    inputElements[i].addEventListener('input', doSomethingFunction);
}

querySelectorAll返回一个静态NodeList。您需要迭代并附加事件。

不使用返回实时HTMLCollection的getElementsByClassName，而是使用querySelectorAll是首选。

将DOM事件处理程序与getElementsByClassName一起使用

2 个答案: