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

Change text colour in one function

100+
P: 118
So far I have

Expand|Select|Wrap|Line Numbers
  1. function color()
  2. {
  3. var box = document.getElementById('message');
  4.  
  5. box = box.style.color = "#FF0000";    
  6.  
  7. }
  8.  
So with that when you press the link, the text in the the textbox turns red.

I don't want to have to repeat a lot of code over and over for different colours. Is there anyway I can use one function to change to different colours?

So if the onclick is color(red) it turns red or color(blue) turns blue etc...

Would that be possible and what code would I need?

Hope I was clear,

Thanks,
Sam
Oct 7 '07 #1
Share this Question
Share on Google+
4 Replies


100+
P: 210
Expand|Select|Wrap|Line Numbers
  1. box = box.style.color = "#FF0000";    
  2.  
  3.  
You don't need box= there.


So if the onclick is color(red) it turns red or color(blue) turns blue etc...
That would have to be color("red")

An associative array is one way to translate from a string. For simplicity there's no error checking here:
Expand|Select|Wrap|Line Numbers
  1. function color(elemId, clr)
  2. {
  3.  var table=[];
  4.  table['red']='#FF0000'; table['blue']='#00FF00'; table['green']='#00FF00' ;
  5.  
  6.  document.getElementById(elemId).style.color=table[clr];
  7. }
  8.  
onclick="color('IdOfMyElement', 'red')"
Oct 8 '07 #2

gits
Expert Mod 5K+
P: 5,390
...
Expand|Select|Wrap|Line Numbers
  1. var table=[];
  2. table['red']='#FF0000'; table['blue']='#00FF00'; table['green']='#00FF00' ;
  3.  
...
hi ...

i think i have to mention some things here. the code above misuses an array as an object ... try:

Expand|Select|Wrap|Line Numbers
  1. alert(table.length);
you will get 0. what you do with the above assignments is to create member-variables within the array-object itself, you could also do:

Expand|Select|Wrap|Line Numbers
  1. table.red = 'foo';
in case you want to loop now ... you MUST use:

Expand|Select|Wrap|Line Numbers
  1. for (var i in table) {
  2.     alert(table[i]);
  3. }
since you use now the array-object! this is quite a misuse of it. try to push an element and now our 'normal' array will contain 1 element.

the correct way would be to use an object at all.

Expand|Select|Wrap|Line Numbers
  1. var table = {};
  2.  
and use that as a 'quasi'-assoc-array ... but it is an object :) ... in javascript we have no assoc-arrays ... but we may use objects for that.

kind regards
Oct 8 '07 #3

100+
P: 210
hi ...

i think i have to mention some things here. the code above misuses an array as an object ... try:

Expand|Select|Wrap|Line Numbers
  1. alert(table.length);
you will get 0. what you do with the above assignments is to create member-variables within the array-object itself, you could also do:

Expand|Select|Wrap|Line Numbers
  1. table.red = 'foo';
in case you want to loop now ... you MUST use:

Expand|Select|Wrap|Line Numbers
  1. for (var i in table) {
  2.     alert(table[i]);
  3. }
since you use now the array-object! this is quite a misuse of it. try to push an element and now our 'normal' array will contain 1 element.

the correct way would be to use an object at all.

Expand|Select|Wrap|Line Numbers
  1. var table = {};
  2.  
and use that as a 'quasi'-assoc-array ... but it is an object :) ... in javascript we have no assoc-arrays ... but we may use objects for that.

kind regards
I don't agree that there is any abuse going on otherwise the syntax would not be allowed. I know that elements created using associative syntax are stored differently, which is why I didn't use a loop or try to read a .length property. The purpose was to let the interpreter effectively do the looping, and I could just as easily have written:
Expand|Select|Wrap|Line Numbers
  1. var table={red:'#FF0000', green:'#00FF00', blue:'#0000FF'};
which works equally well with the following statement and I'm sure is treated the same way internally.
Oct 8 '07 #4

gits
Expert Mod 5K+
P: 5,390
Expand|Select|Wrap|Line Numbers
  1. var table={red:'#FF0000', green:'#00FF00', blue:'#0000FF'};
this is correct usage, because you create a regular javascript object with its literals ... but in the above post you did use an Array ... you constructed it literally with [] ! and then used its constructing object to store properties in it ... this is definitly a misuse of the Array-Object!

Expand|Select|Wrap|Line Numbers
  1. // this is an Array ... you can use all array-methods like
  2. // push, pop, etc. with it and it CANNOT be assoc
  3. var a = []; 
  4.  
  5. // this is an object ... that you may use AS an assoc array
  6. // but it is an object at all
  7. var o = {};
  8.  
kind regards

ps: its not an abuse since an Array is an Object too. try to alert(typeof []); so its not a syntactically abuse ... its a semantic one ...
Oct 8 '07 #5

Post your reply

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