Question

我的网页上有一个非常简单的脚本，允许用户更改元素的background颜色;基于 rgb滑块值。

但是，为了更新元素background rgb()，它必须更改最上面的input滑块值。

脚本假设的工作方式是，当更改任何滑块值时，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()返回元素列表。您需要迭代它以将事件处理程序与单个元素绑定。

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>

在第一次输入被更改之前，RGB值不会改变

1 个答案: