Как мне подключить ползунки к элементу статьи в JavaScript? - PullRequest
Новая
       65

Как мне подключить ползунки к элементу статьи в JavaScript?

1 голос
/ 10 апреля 2020

Мне нужно создать ползунок HSL, который изменит цвет фона элемента article в моем 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, потому что предупреждение событие всплыло, но я не могу понять, как изменить цвет.

Я только начал программировать, так что ответ, вероятно, очень прост, я просто не смог понять. Буду признателен за любую помощь!

Заранее благодарим вас, и, пожалуйста, дайте мне знать, если вам понадобится больше кода!

1 Ответ

0 голосов
/ 10 апреля 2020

Это может помочь вам добраться: 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),
    );
})
...