rgb function with variable parameters?

mzd12111

hello there

i have some problem with rgb. i am writing a color selector , 3 sliders demonstrate 3 color , red and green and blue , then the mix color appears in a div named 'result' in the end of page. consider i have 3 variables which indicates 3 magnitude for r , g , and b. and this is my code :

Expand|Select|Wrap|Line Numbers

document.getElementById("result").style.backgroundColor = 'rgb(r,g,b)'

but this is not working at all, and when i use below code ,instead of the above one , it is working :

Expand|Select|Wrap|Line Numbers

document.getElementById("result").style.backgroundColor = 'rgb(10,10,10)'

but be sure that r and g abd b variables are all correct. because i use 'alert' function and all of them store a number between 0 and 255. i wonder if javascript does not compile the code between ' and ' , i mean rgb function , and pass the function to another program like html to compile, and html has no clue on r and g and b variables. am i right? is there any way to help me?

zaphod42

your variables can't be part of the string:

Expand|Select|Wrap|Line Numbers

 document.getElementById("result").style.backgroundColor = 'rgb('+r+','+g+','+b+')'
 

since the backgroundColor is a string, you have to concatenate it using the function supplied by javascript ( + )
e.g.:

Expand|Select|Wrap|Line Numbers

 var a='ABC'

var b='DEF'

var c=a+b

alert(c)

will alert 'ABCDEF'
and

Expand|Select|Wrap|Line Numbers

 var c='let us begin with '+a+' and continue with '+b

alert(c)

will alert ''let us begin with ABC and continue with DEF

gits

yes ... another option is to use a kind of util-method for this, since this is a common task and you would have a centralized handling that might be of advantage in larger projects ... here is an example:

Expand|Select|Wrap|Line Numbers

 // a method that should return the desired string

function setRGB(r, g, b) {

    var s = 'rgb(%s, %s, %s)';

    return sprintf(s, r, g, b);

}
 
// replaces all %s in a string with the passed params

// in the passed order

// such a method is often useful ;)

function sprintf(s) {

    for (var i = 1, l = arguments.length; i < l; i++) {

        s = s.replace(/%s/, arguments[i]);

    }
 
    return s;

}
 
// then you might always use

document.getElementById("result").style.backgroundColor = setRGB(r, g, b);

kind regards

zaphod42

iteration is something you could use, I would just build the function to:

Expand|Select|Wrap|Line Numbers

 
setColor(myElement,'150,150,150')
 
function setColor(el,vals){

    el.style.backgroundColor='rgb('+vals+')'

}

or

setColor(myElement,r,g,b)

function setColor(el,r,g,b){

    el.style.backgroundColor='rgb(' +r+ ',' +g+ ',' +b+ ')'

}

or

Expand|Select|Wrap|Line Numbers

 
myElement.style.backgroundColor=getColor('150,150,150')
 
function getColor(vals){

    return ('rgb('+vals+')')

}

or

myElement.style.backgroundColor=getColor(r,g,b)
 
function getColor(vals){

    return (  'rgb(' + r + ',' + g + ',' + b + ')'  )

}

gits

of course for only one case my example might be overhead but have a look at the sprintf() method ... that could be used universaly for replacing of things in any string s (regardless of the number of parts that should be affected in a string) ... that was why i called it a util method ...

zaphod42

excellent point, that is a very handy method, I've recently had to deal with very specific regExp functions, so I suppose I'm thinking on a much smaller scale:)

mzd12111

Thanks Men(women)
Your guides were led to Victory

gits

no problem :) ... you're welcome ... post back to the forum anytime you have more questions ...

kind regards

rgb function with variable parameters?

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ