如何将滑块连接到JavaScript中的article元素？

Abracadaver

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

我整天都在忙着阅读，但是还没有找到解决方案，所以我在这里寻求帮助。

这是我现在拥有的相关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一起使用，因为会弹出警报事件，但我不知道如何更改颜色。

我刚刚开始编程，所以答案可能很简单，我只是无法弄清楚。任何帮助，将不胜感激！

预先谢谢您，如果您需要更多代码，请告诉我！

twharmon

这可能会帮助您到达那里：https : //jsfiddle.net/1f72vdpL/。getElementsByTagName将返回数组或集合，而不是单个元素。我认为通常最好使用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),
    );
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。