By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,097 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

rgb function with variable parameters?

P: 4
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
  1. 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
  1. 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?
Oct 17 '08 #1
Share this Question
Share on Google+
7 Replies


P: 55
your variables can't be part of the string:

Expand|Select|Wrap|Line Numbers
  1. 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
  1. var a='ABC'
  2. var b='DEF'
  3. var c=a+b
  4. alert(c)
will alert 'ABCDEF'
and

Expand|Select|Wrap|Line Numbers
  1. var c='let us begin with '+a+' and continue with '+b
  2. alert(c)
will alert ''let us begin with ABC and continue with DEF
Oct 17 '08 #2

gits
Expert Mod 5K+
P: 5,235
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
  1. // a method that should return the desired string
  2. function setRGB(r, g, b) {
  3.     var s = 'rgb(%s, %s, %s)';
  4.     return sprintf(s, r, g, b);
  5. }
  6.  
  7. // replaces all %s in a string with the passed params
  8. // in the passed order
  9. // such a method is often useful ;)
  10. function sprintf(s) {
  11.     for (var i = 1, l = arguments.length; i < l; i++) {
  12.         s = s.replace(/%s/, arguments[i]);
  13.     }
  14.  
  15.     return s;
  16. }
  17.  
  18. // then you might always use
  19. document.getElementById("result").style.backgroundColor = setRGB(r, g, b);
kind regards
Oct 17 '08 #3

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

Expand|Select|Wrap|Line Numbers
  1. setColor(myElement,'150,150,150')
  2.  
  3. function setColor(el,vals){
  4.     el.style.backgroundColor='rgb('+vals+')'
  5. }
  6. or
  7. setColor(myElement,r,g,b)
  8. function setColor(el,r,g,b){
  9.     el.style.backgroundColor='rgb(' +r+ ',' +g+ ',' +b+ ')'
  10. }
  11.  
or

Expand|Select|Wrap|Line Numbers
  1. myElement.style.backgroundColor=getColor('150,150,150')
  2.  
  3. function getColor(vals){
  4.     return ('rgb('+vals+')')
  5. }
  6. or
  7. myElement.style.backgroundColor=getColor(r,g,b)
  8.  
  9. function getColor(vals){
  10.     return (  'rgb(' + r + ',' + g + ',' + b + ')'  )
  11. }
  12.  
Oct 17 '08 #4

gits
Expert Mod 5K+
P: 5,235
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 ...
Oct 17 '08 #5

P: 55
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:)
Oct 17 '08 #6

P: 4
Thanks Men(women)
Your guides were led to Victory
Oct 20 '08 #7

gits
Expert Mod 5K+
P: 5,235
no problem :) ... you're welcome ... post back to the forum anytime you have more questions ...

kind regards
Oct 20 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.