Использование обработчиков событий DOM с getElementsByClassName

Question

У меня есть веб-сайт, над которым я работаю, который принимает данные от пользователя и вычисляет результаты. Все формы представляют собой текстовые формы ввода html, где они вводятся в определенном количестве.

Я хочу использовать событие ввода, чтобы проверить, когда пользователь вводит новое значение в одну из этих 6 текстовых форм. Пример в книге, которую я использую, JavaScript and JQuery: Interactive Front-End Web Development, предлагают использовать метод getElementById с обработчиком дом события, чтобы сделать это:

Например:

function doWhatIwantToDo() 
{ 
    //Do something 
} 

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

Это здорово, и я мог бы создать 6 уникальных ids для каждой текстовой формы, что мне нужно будет сделать в любом случае, чтобы изменить свой внутренний HTML-код в моем javascript-коде, но есть ли какой-нибудь способ проверить вход с помощью имени класса?

Я попытался использовать getElementsByClassName, но он отключает меня, потому что он возвращает массив объектов.

Я хочу, чтобы избежать каких-либо jquery-решений прямо сейчас, потому что я пытаюсь изучить 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. Вам необходимо выполнить итерацию и прикрепить событие.

Вместо использования getElementsByClassName, который возвращает живой HTMLCollection, работающий с querySelectorAll был бы предпочтительным.