输入事件监听器未为类触发

Input event listener not firing for classes

本文关键字：入事件 监听器 输入      更新时间：2023-09-26

我有一个用于3个输入框的CSS类，称为.rgb。在这个.rgb类中有三个输入框，其ID分别为:#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类下的所有三个输入框的输入?

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>

相关文章：