Change text colour in one function

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • helraizer1
    New Member
    • Mar 2007
    • 118

    Change text colour in one function

    So far I have

    [code=javascript]
    function color()
    {
    var box = document.getEle mentById('messa ge');

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

    }
    [/code]

    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
    New Member
    • Feb 2007
    • 210

    #2
    Originally posted by helraizer1
    Code:
    box = box.style.color = "#FF0000";
    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:
    [CODE=javascript]
    function color(elemId, clr)
    {
    var table=[];
    table['red']='#FF0000'; table['blue']='#00FF00'; table['green']='#00FF00' ;

    document.getEle mentById(elemId ).style.color=t able[clr];
    }
    [/CODE] onclick="color( 'IdOfMyElement' , 'red')"

    Comment

    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390

      #3
      Originally posted by Logician
      ...
      [CODE=javascript]
      var table=[];
      table['red']='#FF0000'; table['blue']='#00FF00'; table['green']='#00FF00' ;
      [/CODE] ...
      hi ...

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

      [CODE=javascript]alert(table.len gth);[/CODE]
      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:

      [CODE=javascript]table.red = 'foo';[/CODE]
      in case you want to loop now ... you MUST use:

      [CODE=javascript]for (var i in table) {
      alert(table[i]);
      }[/CODE]
      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.

      [CODE=javascript]var table = {};
      [/CODE]
      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

      Comment

      • Logician
        New Member
        • Feb 2007
        • 210

        #4
        Originally posted by gits
        hi ...

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

        [CODE=javascript]alert(table.len gth);[/CODE]
        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:

        [CODE=javascript]table.red = 'foo';[/CODE]
        in case you want to loop now ... you MUST use:

        [CODE=javascript]for (var i in table) {
        alert(table[i]);
        }[/CODE]
        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.

        [CODE=javascript]var table = {};
        [/CODE]
        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:
        Code:
        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.

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5390

          #5
          Originally posted by Logician
          Code:
          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!

          [CODE=javascript]
          // 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 = {};
          [/CODE]
          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 ...

          Comment

          Working...