Dodawanie RGB do obiektu za pomocą JQuery

Question

Dobry wieczór mam lekki problem z takim oto kodem 

$("#kolor").click(function(){
    var red = $("#red").val();
    var green = $("#green").val();
    var blue = $("#blue").val();

    $("#kolor").css("background-color", "rgb(red,green,blue)");
})

        <p>R: <input type="number" name="" id="red"></p>
        <p>G: <input type="number" name="" id="green"></p>
        <p>B: <input type="number" name="" id="blue"></p>

        <input type="button" value="Kolor" id="kolor">

ma on za zadanie pobierać wartości z pól r,g,b oraz na ich podstawie ustawiać kolor przycisku lecz nie wiem czemu nie chce ich pobrać. Problem jest pewnie bardzo błahy ale proszę o pomoc i wytłumaczenie mi błędu który popełniłem. Z góry dziękuję .

Comments

Jeżeli to mają być wartości dla RGB to może dodaj atrybuty

<p>R: <input type="number" min="0" max="255" value="0" id="red"></p>
<p>G: <input type="number" min="0" max="255" value="0" id="green"></p>
<p>B: <input type="number" min="0" max="255" value="0" id="blue"></p>

 

P.S. "używając" zdarzenia (event) oninput ( on-line ) będziesz mógł ustawiać background-color na "bieżąco". 

Answer 1

W JS-ie zmienne nie są podstawiane do ciągów, które są otoczone cudzysłowami. Musiałbyś albo użyć konkatenacji ciągów, albo interpolacji w template strings.

Polecam ten drugi sposób, czyli coś typu:

const a = 'test'

alert( `Wartość zmiennej a: ${ a }` );