我的网页上有一个非常简单的脚本,允许用户更改元素的背景
颜色;基于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还很陌生。
谢谢。
最佳答案
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>
关于javascript - 在更改第一个输入之前,RGB 值不会更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41505784/