Ввод прослушивателя событий не запускается для классов

Question

У меня есть класс CSS для 3 ящиков ввода, называемый .rgb. В этом классе .rgb имеются три поля ввода с идентификаторами: #rgb, #rgb2 и #rgb3.

Я пытаюсь захватить, когда какой-либо из трех полей ввода имеет текст, введенный с помощью .addEventListener, хотя он не работает, когда я выбираю элементы по имени класса. Нет innerHTML не быть приложено

Ниже мой уменьшенный код для этого примера:

document.getElementsByClassName('rgb').addEventListener("input", function() { 
    // Stores the r, g, b values 
    var r = document.getElementById('rgb').value; 
    var g = document.getElementById('rgb2').value; 
    var b = document.getElementById('rgb3').value; 

    document.getElementById('rgb-output').innerHTML = 'RGB: rgb(' + r + ', ' + g + ', ' + b + ')'; 
    document.getElementById('hex-output').innerHTML = 'HEX: ' + rgbToHEX(r, g, b).toUpperCase(); 
}, false); 

Как я могу изменить код так, чтобы он прослушивал для входа на все трех полях ввода под .rgb класса?

Answer 1

Результатом getElementsByClassName является список узлов. Вы не можете присоединить обработчик событий к списку узлов. Вы должны зайти в список узлов и присоединить обработчики к отдельным элементам, хранящимся в этом списке узлов.

var theInputs = document.querySelectorAll('.rgb') 
 
    for(var i = 0; i < theInputs.length; ++i){ 
 
     theInputs[i].addEventListener("input", calc); 
 
    } 
 

 
    function calc() { 
 
     // Stores the r, g, b values 
 
     var r = document.getElementById('rgb').value; 
 
     var g = document.getElementById('rgb2').value; 
 
     var b = document.getElementById('rgb3').value; 
 

 
     document.getElementById('rgb-output').innerHTML = 'RGB: rgb(' + r + ', ' + g + ', ' + b + ')'; 
 
     document.getElementById('hex-output').innerHTML = 'HEX: ' + rgbToHEX(r, g, b).toUpperCase(); 
 
    } 
 

 
    function rgbToHEX(){ 
 
     return "it works!"; 
 
    }

<input class="rgb" id="rgb"> 
 
<input class="rgb" id="rgb2"> 
 
<input class="rgb" id="rgb3"> 
 

 
<div id="rgb-output"></div> 
 
<div id="hex-output"></div>