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 :

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 :

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:

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.:

var a='ABC'
var b='DEF'
var c=a+b
alert(c)

will alert 'ABCDEF'
and

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:

// 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:

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

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