Why transparency rgba works only first time

Question

Transparency should be changed with the rgba, but rgb should not be changed. Only "a" should be changeable. It only works the first time, if I want to change the second time the value is null. Where am I wrong?

<select id="elementbackgroundtransparency" onchange="ElementBackgroundTransparency()">
    <option value="1">1</option>                 
    <option value="0.1">0.1</option>                 
    <option value="0.2">0.2</option>                
    <option value="0.3">0.3</option>                 
    <option value="0.4">0.4</option>                 
    <option value="0.5">0.5</option>                 
    <option value="0.6">0.6</option>
    <option value="0.7">0.7</option>
    <option value="0.8">0.8</option>
    <option value="0.9">0.9</option>
</select>

<div id="color" style="height:50px;width:50px;background-color:rgba(255,0,0,0.3);"></div>

function ElementBackgroundTransparency(){
        var t = document.getElementById("elementbackgroundtransparency").value;
        var elem = document.getElementById("color");
        var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");

        var rgb = /rgb\((\d+), (\d+), (\d+)\)/.exec(theCSSprop);
        var r = rgb[1];
        var g = rgb[2];
        var b = rgb[3];
        document.getElementById("color").style.backgroundColor = "rgba("+r+", "+g+", "+b+""+", "+t+")";

}

Answer 1

Your function working fine for the first time because of the value of A in RGBA 1 which is equal to nothing, therefore your

var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");

return rgba(255, 0, 0) which is correct value for your regex

But when you change option from dropdown your script return rgba(255, 0, 0,0.3) which is wrong input for your regex expression.

You have to rectify theCSSprop value before passed to regex.

function ElementBackgroundTransparency(){
        var t = document.getElementById("elementbackgroundtransparency").value;
        var elem = document.getElementById("color");
        var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
        theCSSprop = theCSSprop.split(",");
        if(theCSSprop.length > 3){
            theCSSprop[0] = theCSSprop[0].replace("a","");
            theCSSprop.splice(-1, 1);
            theCSSprop = theCSSprop.join(",");
            theCSSprop += ")";
        }
        console.log(theCSSprop);
        var rgb = /rgb\((\d+), (\d+), (\d+)\)/.exec(theCSSprop);
        if(rgb !== null){
            var r = rgb[1];
            var g = rgb[2];
            var b = rgb[3];
            document.getElementById("color").style.backgroundColor = "rgba("+r+", "+g+", "+b+""+", "+t+")";
        }else{
            console.log(rgb,"failed");
        }
}

jsFiddle link