change text color of a link with onclick event

Discussion in 'Javascript' started by Matt, Feb 10, 2004.

  1. Matt

    Matt Guest

    I created 3 hyperlinks, when the user click each link, it will change
    the color of the text of a link. For example, when user clicks Link1,
    text Link1 will become red color, but Link2 and Link3 unchange. Here's
    my attempts, any ideas??

    <script language="javascript">
    function changecolor (i)
    {
    document.i.fontcolor = red;
    }
    </script></head><a name="item1" href="test.html"
    onClick='changecolor(item1)'>Link 1</a><a name="item2"
    href="test.html" onclick='changecolor(item2)'>Link 2</a><a
    name="item3" href="test.html" onclick='changecolor(item3)'>Link 3</a>
    Matt, Feb 10, 2004
    #1
    1. Advertising

  2. Matt wrote:
    > I created 3 hyperlinks, when the user click each link, it will change
    > the color of the text of a link. For example, when user clicks Link1,
    > text Link1 will become red color, but Link2 and Link3 unchange. Here's
    > my attempts, any ideas??
    >
    > <script language="javascript">
    > function changecolor (i)
    > {
    > document.i.fontcolor = red;
    > }
    > </script></head><a name="item1" href="test.html"
    > onClick='changecolor(item1)'>Link 1</a><a name="item2"
    > href="test.html" onclick='changecolor(item2)'>Link 2</a><a
    > name="item3" href="test.html" onclick='changecolor(item3)'>Link 3</a>


    Hmmmm... Where do I begin...
    1. You close the head, but do not create a body
    2. I recommend putting the text you want to change in a FONT tag
    3. The document.i technique is no good. Use getElementById or all
    4. The font color needs to be "red", not red.
    ....

    Well, here is a re-write. It works:

    <HTML>
    <HEAD>
    <script language="javascript">
    function changecolor (i)
    {
    if(document.getElementById)
    document.getElementById(i).color = "red";
    else if(document.all)
    document.all.color = "red";

    // makes it so the page does not go to test.html
    return false;
    }
    </script>
    </head>

    <BODY>
    <a href="test.html" onClick='return changecolor("item1")'><font
    id=item1> Link 1</font></a>
    <a href="test.html" onclick='return changecolor("item2")'><font
    id=item2> Link 2</font></a>
    <a href="test.html" onclick='return changecolor("item3")'><font
    id=item3> Link 3</font></a>
    </BODY>
    </HTML>
    Brian Genisio, Feb 11, 2004
    #2
    1. Advertising

  3. Brian Genisio wrote:

    > 2. I recommend putting the text you want to change in a FONT tag


    Why? SPAN will do.
    --
    Bas Cost Budde
    http://www.heuveltop.org/BasCB
    but the domain is nl
    Bas Cost Budde, Feb 12, 2004
    #3
  4. Bas Cost Budde wrote:

    > Brian Genisio wrote:
    >
    >> 2. I recommend putting the text you want to change in a FONT tag

    >
    >
    > Why? SPAN will do.



    Because FONT was the first thing that came to mind, and is most
    intuitive. What's wrong with FONT?

    Brian
    Brian Genisio, Feb 12, 2004
    #4
  5. Brian Genisio wrote:

    > Because FONT was the first thing that came to mind, and is most
    > intuitive. What's wrong with FONT?
    >

    <nagging voice> It's deprecated. </nagging voice> Nothing, really.
    Although I prefer to use tags to indicate meaning. This sample is
    changing font properties, so who's to judge?

    BTW could you also use

    <a href="test.html" onClick='return changecolor(this)'>

    instead of your proposed

    <a href="test.html" onClick='return changecolor("item1")'>

    ?

    --
    Bas Cost Budde
    http://www.heuveltop.org/BasCB
    but the domain is nl
    Bas Cost Budde, Feb 12, 2004
    #5
  6. On Thu, 12 Feb 2004 08:28:10 -0500, Brian Genisio <>
    wrote:

    > Bas Cost Budde wrote:
    >
    >> Brian Genisio wrote:
    >>
    >>> 2. I recommend putting the text you want to change in a FONT tag

    >>
    >> Why? SPAN will do.

    >
    > Because FONT was the first thing that came to mind, and is most
    > intuitive. What's wrong with FONT?


    It's deprecated and has been for almost the past 7 years, along with
    virtually every other presentational feature in HTML[1].

    CSS 1 is widely supported and provides most of the functionality that
    "presentational HTML" once had. CSS 2, though less supported, provides
    more functionality than HTML once had.

    Mike


    [1] The only ones that remain can be argued to be structural elements that
    have a presentational side effect.

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
    Michael Winter, Feb 12, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Adams
    Replies:
    0
    Views:
    875
    Matt Adams
    Aug 26, 2003
  2. Richard Thoms
    Replies:
    6
    Views:
    4,911
    Richard Thoms
    Dec 2, 2005
  3. Kamaljeet Saini
    Replies:
    0
    Views:
    388
    Kamaljeet Saini
    Feb 13, 2009
  4. Replies:
    7
    Views:
    365
    Mick White
    Feb 2, 2005
  5. apparker
    Replies:
    10
    Views:
    358
    apparker
    Apr 3, 2007
Loading...

Share This Page