クラスの入力イベントリスナーが呼び出されない

Question

3入力ボックスのCSSクラスが.rgbとなっています。この.rgbクラスには、IDが#rgb,#rgb2、#rgb3の3つの入力ボックスがあります。

3つの入力ボックスのいずれかが.addEventListenerを使用して入力されたテキストをキャプチャしようとしましたが、クラス名で要素を選択すると機能しません。何innerHTMLのは

以下

を追加されていない。この例のための私の縮小さコードです：それは.rgbクラスの下に3つのすべての入力ボックスに入力をリッスンするよう

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); 

どのようにコードを変更することができますが？

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>