change text color of a link with onclick event

Matt · Feb 10, 2004

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>

Brian Genisio · Feb 11, 2004

Matt said:
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>

Bas Cost Budde · Feb 12, 2004

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

Why? SPAN will do.

Brian Genisio · Feb 12, 2004

Bas said:
Why? SPAN will do.

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

Brian

Bas Cost Budde · Feb 12, 2004

Brian said:
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")'>

?

Michael Winter · Feb 12, 2004

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.

How to change star rating color on mouseenter, on mouseout, and on onclick	0	Sep 28, 2018
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Change link color on div hover	20	Jun 7, 2009
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Check forms With JavaScript	1	Mar 28, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Problems with using event handlers for button and textarea input	1	Nov 29, 2021

change text color of a link with onclick event

Matt

Brian Genisio

Bas Cost Budde

Brian Genisio

Bas Cost Budde

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads