我应该如何将滑块连接到 JavaScript 中的文章元素？

Question

我需要创建一个 HSL 滑块来更改 HTML 中文章元素的背景颜色。但是，我不知道如何将滑块连接到背景颜色。

我整天都在捣乱和阅读，但还没有想出解决办法，所以我在这里寻求帮助。

这是我现在拥有的相关 JavaScript 代码：

var article = document.getElementsByTagName("article");
var backgroundColor = document.getElementById("backgroundColor");

var hSlider = document.getElementById("myRange1");
var sSlider = document.getElementById("myRange2");
var lSlider = document.getElementById("myRange3");

var makeHslString = function hsl(ih, is, il) {
    var hslString = "("+ ih + ", " + is + "%, " + il + "%)";
    return hslString;
    console.log("The result of the function is " + hslString);
}

hSlider.addEventListener("click", function(ev) {
    // alert("got a click!");
})

hSlider.addEventListener("input", function(ev) {
    article.style = makeHslString(0, 0, 0);
    article.style.backgroundColor = hSlider.value;
})

滑块工作得很好，我知道它们与我的 JavaScript 一起工作，因为弹出了警报事件，但我不知道如何更改颜色。

我刚开始编程，所以答案可能非常简单，只是我一直想不出来。如有任何帮助，我们将不胜感激！

提前致谢，如果您需要查看更多代码，请告诉我！

Answer 1

这可能会帮助您到达那里：https://jsfiddle.net/1f72vdpL/。 getElementsByTagName 将 return 一个数组或集合，而不是单个元素。我认为通常最好使用 getElementById 或 querySelector.

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


var color = { h: 0, s: 0, l: 0 }
var hSlider = document.getElementById("myRange1");
var sSlider = document.getElementById("myRange2");
var lSlider = document.getElementById("myRange3");

var makeHslString = function hsl(ih, is, il) {
    var hslString = "hsl("+ ih + ", " + is + "%, " + il + "%)";
    color.h = ih
    color.s = is
    color.l = il
    return hslString;
}


hSlider.addEventListener("input", ev => {
    article.style.background = makeHslString(
        parseInt(ev.target.value),
        color.s,
        color.l,
    );
})
sSlider.addEventListener("input", ev => {
    article.style.background = makeHslString(
        color.h,
        parseInt(ev.target.value),
        color.l,
    );
})
lSlider.addEventListener("input", ev => {
    article.style.background = makeHslString(
        color.h,
        color.s,
        parseInt(ev.target.value),
    );
})

我应该如何将滑块连接到 JavaScript 中的文章元素？

How should I connect my sliders to the article element in JavaScript?

javascript

hsl

events

function

slider