javascript: call function by classname

Question

Попытка создать скрипт, связанный классомName, и вызывает другую функцию.

У меня этот код работает для первого экземпляра классаName, но если я удалю [0] в первой строке скрипта, он больше не работает.

<input type="text" value="NOTBound" class="NOTBound"/> 
    <input type="text" value="Bound value 1" class="Bound"/> 
    <input type="text" value="NOTBound" class="NOTBound"/> 
    <input type="text" value="Bound value 2" class="Bound"/> 
    <script> 
    inputBound = document.getElementsByClassName('Bound')[0]; 
    inputBound.onfocus = function() { 
     var input = this.value; 
     formFunct(input); 
    } 
    function formFunct(input) { 
     console.log('done did the form Funct: ' + input) 
    } 
    </script> 

Как заставить его работать на всех входах с className="Bound"? Мне не нужно решение jQuery.

спасибо.

Answer 1

Используйте петлю для повторения всех элементов.

Применение Array#forEach, forEach() метод выполняет функцию при условии один раз на каждый элемент массива.

Другое альтернативными мог использовать Array.from над HTMLCollection возвращенного getElementsByClassName, так что вы можете вызвать Array# методы непосредственно над возвращенным результатом.

var inputBound = document.getElementsByClassName('Bound'); 
 
[].forEach.call(inputBound, function(inputBound) { 
 
    inputBound.onfocus = function() { 
 
    var input = this.value; 
 
    formFunct(input); 
 
    } 
 
}) 
 

 
function formFunct(input) { 
 
    console.log('done did the form Funct: ' + input) 
 
}

<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 1" class="Bound" /> 
 
<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 2" class="Bound" />

Примечания:

• Refer What does [].forEach.call() do in JavaScript? , чтобы понять [].forEach.call.
• Как указано в комментариях, вы можете использовать for-loop, а также для итерации HTMLCollection.
• Насколько Browser compatibility обеспокоен, можно было бы использовать Polyfill

Answer 2

перебрать NodeList и присоединить обработчик событий к элементу.

// get all elements and convert to array 
 
Array.from(document.getElementsByClassName('Bound')) 
 
    // iterate overa array elements 
 
    .forEach(function(ele) { 
 
    // bind event handler 
 
    ele.onfocus = function() { 
 
     var input = this.value; 
 
     formFunct(input); 
 
    } 
 
    }); 
 

 
function formFunct(input) { 
 
    console.log('done did the form Funct: ' + input) 
 
}

<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 1" class="Bound" /> 
 
<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 2" class="Bound" />

Answer 3

просто перебирать все Node (s) в NodeList (с хорошим старым для петли :))

inputBounds = document.getElementsByClassName('Bound'); 
for(var counter = 0; counter < inputBounds.length; inputBounds++) 
{ 
    inputBounds.item(counter).onfocus = function() { 
     var input = this.value; 
     formFunct(input); 
    } 
}