I've added 4 "range" type inputs, and use their values to set the RGBA value of another element, but it's not working.

window.onload = init;

function init(){
document.getElementById("colorR").onchange() = setColors;
document.getElementById("colorG").onchange() = setColors;
document.getElementById("colorB").onchange() = setColors;
document.getElementById("Opacity").onchange() = setColors;  
}
function setColors(){
var r = document.getElementById("colorR").value;
var g = document.getElementById("colorG").value;
var b = document.getElementById("colorB").value;
var a = document.getElementById("Opacity").value;

    //alert(r+", "+g+", "+b+", "+a);

document.getElementsByClassName("previewAreaBox")[0].style.setAttribute(
"background-color", "rgba(",r+", "+g+", "+b+", "+a/100+");");

}

Any help would be greatly appreciated. Thanks.

I've added 4 "range" type inputs, and use their values to set the RGBA value of another element, but it's not working.

window.onload = init;

function init(){
document.getElementById("colorR").onchange() = setColors;
document.getElementById("colorG").onchange() = setColors;
document.getElementById("colorB").onchange() = setColors;
document.getElementById("Opacity").onchange() = setColors;  
}
function setColors(){
var r = document.getElementById("colorR").value;
var g = document.getElementById("colorG").value;
var b = document.getElementById("colorB").value;
var a = document.getElementById("Opacity").value;

    //alert(r+", "+g+", "+b+", "+a);

document.getElementsByClassName("previewAreaBox")[0].style.setAttribute(
"background-color", "rgba(",r+", "+g+", "+b+", "+a/100+");");

}

Any help would be greatly appreciated. Thanks.

• javascript
• styles
• getelementsbyclassname

Share Improve this question Follow asked Jul 26, 2013 at 23:53 mtdmtd 10911 gold badge22 silver badges1212 bronze badges 5

• 2 Open your browser's developer console, and you'll see errors. That should be the first place you look when something isn't working. – user2437417 Commented Jul 26, 2013 at 23:56
• When you are calling document.getElementById("...").onchange() = setColors, you are executing any attached function. take away the parenthesis so it looks like this: document.getElementById("...").onchange = setColors. That way you are setting the variable and the new value (a function) will be called later. – smakateer Commented Jul 27, 2013 at 0:01
• Thank you both Crazy Train and smakateer – mtd Commented Jul 27, 2013 at 0:37
• mtd +1 to you because you are showing your appreciation when the majority of new users will take an answer and disappear. Wele to Stack Overflow! – Joseph Myers Commented Jul 27, 2013 at 0:40
• Tnx for your kindness dear joseph – mtd Commented Jul 27, 2013 at 0:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

style.setAttribute(

setAttribute applies to an element, not the style.

And background-color is a style-property, not an attribute.

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = ".."

At minimum,

document.getElementById("colorR").onchange() = setColors;

should be changed to

document.getElementById("colorR").onchange = setColors;

The rest of your code won't run at all without making that change, because onchange() invokes the event handler while onchange without parentheses is used to assign the event handler.

ALSO

As noted by Connor's helpful ment, Andy's answer contains part of the solution, and I also noticed one more error in your code:

"rgba(",r+", "+g+", "+b+", "+a/100+");"

needs to be something like this (plus where a ma is now, and parentheses around the arithmetic to keep its left operand from being converted to a string prematurely):

"rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");"

So plugging that into Andy's answer, the setColors function should have its last line like this:

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = "rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");";

Ok, so there are a few problems here

1. You need to assign the function to the change event, not call the change event.

2. You don't use setAttribute on the style, you use that to set a attribute on a element.

3. You should be caching your elements.

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

---

Element.onchange() = something; 

Won't work because onchange(); actually triggers the event and doesn't assign the function to it.

You can also use Array.join for the rgba like so

var rgba = [elementR.value, elementG.value, elementB.value, 
            opacityElement.value / 100];
preview.style.backgroundColor =  'rgba(' + rgba.join(',') + ')';