javascript - 在更改第一个输入之前，RGB 值不会更改

Question

我的网页上有一个非常简单的脚本，允许用户更改元素的背景颜色；基于rgb slider 值。

但是，为了让它更新元素 background rgb()，最上面的 input slider 值必须具有被改变了。

脚本应该的工作方式是，当任何 slider 值发生更改时，background rgb() 值为随之改变。

这是我的JavaScript:

var input = document.querySelector("input");

input.addEventListener("input", function(){

    var red = document.getElementById("red").value,
        green = document.getElementById("green").value,
        blue = document.getElementById("blue").value;

    var display = document.getElementById("display");

    display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";

});

还有我的HTML:

<div class="picker">
    Red <input type="range" min="0" max="255", step="1" id="red">
    Green <input type="range" min="0" max="255", step="1" id="green">
    Blue <input type="range" min="0" max="255", step="1" id="blue">

    <div id="display"></div>
</div>  

我觉得它可能与document.querySelector("input")有关，但是，我不确定，因为我对纯JavaScript还很陌生。

谢谢。

Answer 1

document.querySelector()返回单个元素，因此它适用于第一个输入。

您需要使用document.querySelectorAll()返回元素列表。您需要迭代它以将事件处理程序与单个元素绑定(bind)。

var input = document.querySelectorAll("input");
for (var i = 0; i < input.length; i++) {
    input[i].addEventListener("input", function() {
        var red = document.getElementById("red").value,
            green = document.getElementById("green").value,
            blue = document.getElementById("blue").value;

        var display = document.getElementById("display");
        display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";
    });
}

<div class="picker">
    Red
    <input type="range" min="0" max="255" , step="1" id="red">
    Green
    <input type="range" min="0" max="255" , step="1" id="green">
    Blue
    <input type="range" min="0" max="255" , step="1" id="blue">
    <div id="display">Yahooooooooooooo</div>
</div>