Change text colour in one function

helraizer1

So far I have

Expand|Select|Wrap|Line Numbers

 
function color()

{

var box = document.getElementById('message');
 
box = box.style.color = "#FF0000";    
 
}

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

Logician

Quote:

Originally Posted by helraizer1

Expand|Select|Wrap|Line Numbers

box = box.style.color = "#FF0000";

You don't need box= there.

Quote:

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

 
function color(elemId, clr)

{

 var table=[];

 table['red']='#FF0000'; table['blue']='#00FF00'; table['green']='#00FF00' ;
 
 document.getElementById(elemId).style.color=table[clr];

}

onclick="color('IdOfMyElement', 'red')"

gits

Quote:

Originally Posted by Logician

...

Expand|Select|Wrap|Line Numbers

 
var table=[];

table['red']='#FF0000'; table['blue']='#00FF00'; table['green']='#00FF00' ;

...

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

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

table.red = 'foo';

in case you want to loop now ... you MUST use:

Expand|Select|Wrap|Line Numbers

 for (var i in table) {

    alert(table[i]);

}

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

var table = {};

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

Logician

Quote:

Originally Posted by gits

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

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

table.red = 'foo';

in case you want to loop now ... you MUST use:

Expand|Select|Wrap|Line Numbers

 for (var i in table) {

    alert(table[i]);

}

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

var table = {};

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

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.

gits

Quote:

Originally Posted by Logician

Expand|Select|Wrap|Line Numbers

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

 
// this is an Array ... you can use all array-methods like

// push, pop, etc. with it and it CANNOT be assoc

var a = []; 
 
// this is an object ... that you may use AS an assoc array

// but it is an object at all

var o = {};

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

Change text colour in one function

re: Change text colour in one function

re: Change text colour in one function

re: Change text colour in one function

re: Change text colour in one function

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about