[英]Input event listener not firing for classes
我有一个用于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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.