change color using input range element

Question

trying to give color value using slider.there will be four slider,they are red,green,blue,alpha.everything seems fine but it is not changing the color of the div having id "mydiv".what could be the problem?

<html>
    <head>
        <script>
            var red=0;
            var green=0;
            var blue=0;
            var alpha=0;
            function changered(val){
                red=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
            function changegreen(val){
                green=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
            function changeblue(val){
                blue=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
            function changealpha(val){
                alpha=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
        </script>
    </head>
    <body>

        <div id="mydiv"  style="border:1px solid black;width:200px;height:100px;"></div></br>
        <div style="background-color:black;color:white;display:inline-block;background-color:red;">
            red:<input type="range" min="0" max="255"  value="0" step="1" onChange="changered(this.value);"></br>
            green:<input type="range" min="0" max="255"  value="0" step="1" onChange="changegreen(this.value);"></br>
            blue:<input type="range" min="0" max="255"  value="0" step="1" onChange="changeblue(this.value);"></br>
            alpha:<input type="range" min="0" max="255"  value="0" step="1" onChange="changealpha(this.value);"></br>
        </div>
    </body>
</html>

Batu.Khan · Accepted Answer · 2014-04-18 07:40:01Z

The things that are wrong with your code :

1 - Alpha value expects a decimal between 0-1 so correct alpha input should be

<input type="range" min="0" max="1"  value="0" step="0.01" onChange="changealpha(this.value);">

2 - You have an extra space in your rgba usage like: rgba ( . But this space between a and ( shouldnt be there : rgba(...

3- Those are just suggestions :

Dont use var m=document.getElementById("mydiv"); in every function but declare that m var before the functions as a global.

Dont write your functions seperately since all they are doing is eventually same thing. Your functions can be merge into one like this

function changeColor(val,color){
  switch (color) {
    case 0: red = val; break;
    case 1: green = val; break;
    case 2: blue = val; break;
    case 3: alpha = val; break;
  }
  m.style.backgroundColor='rgba('+red+','+green+','+blue+','+alpha+')';
}

And of course to use this function u need to call it from inputs like

changeColor(this.value, 0);

FIDDLE

benomatis · Accepted Answer · 2014-04-18 07:37:09Z

2

eliminate the space between rgba and (

wrong code

m.style.backgroundColor='rgba ('+ //...

right code

m.style.backgroundColor='rgba('+ //...

and check again after changing alpha value to 255

edited Apr 18, 2014 at 7:37

benomatis

5,6537 gold badges39 silver badges61 bronze badges

answered Apr 18, 2014 at 7:33

Ashok Gj

1681 silver badge9 bronze badges

1 Comment

benomatis Over a year ago

This is exactly the right answer for the code incorrectness, but for visibility, you must add @Kyo's answer...

Kyo · Accepted Answer · 2014-04-18 07:52:02Z

1

UPDATED:

Your alpha is 0. Make it 1 by default to remove confusion:

var alpha = 1;

, and also there shouldn't be space for the function 'rgba('.

See the working code at:

JSFiddle

edited Apr 18, 2014 at 7:52

answered Apr 18, 2014 at 7:38

Kyo

9645 silver badges10 bronze badges

5 Comments

benomatis Over a year ago

Not sure if you saw @AshokGj's answer before posting this one, but in your fiddle, you also employed his correcting suggestion to remove the space between rgba and (... it wouldn't work without that correction...

Kyo Over a year ago

The reference was taken from this thread: stackoverflow.com/questions/11067516/…

benomatis Over a year ago

don't forget to give credit / thank to those who helped you... you're welcome ;)

benomatis Over a year ago

I gave mine to @BatuZet it's the full and precise answer... ;)

benomatis Over a year ago

ah, and alpha shouldn't be 255 but 1

Collectives™ on Stack Overflow

change color using input range element

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related