Question: So let's say I have some basic code

    <a name = "sec">this is a test</a>

I want a javascript function to on click of a link to change that to

So user clicks: link!

And the JS kicks in to change the 1st html to:

    <font color = "green"><a name = "sec">this is a test</a></font>

Is it possible to do this in JS?

Question: So let's say I have some basic code

    <a name = "sec">this is a test</a>

I want a javascript function to on click of a link to change that to

So user clicks: link!

And the JS kicks in to change the 1st html to:

    <font color = "green"><a name = "sec">this is a test</a></font>

Is it possible to do this in JS?

• javascript
• html
• web

• Don't mean to push a library, but have you checked out jQuery? It makes this kind of stuff really easy. But if this is a one-off case, I'm sure it's also easy to do it in pure js. – Kamil Sindi Commented Nov 8, 2011 at 22:22
• 4 oh... why would you use a font element. Just use the style attribute. – Joseph Marikle Commented Nov 8, 2011 at 22:22
• 4 <FONT> has been deprecated, use CSS instead. – Diodeus - James MacFarlane Commented Nov 8, 2011 at 22:23
• I would but im using a ruby to generate html files thats why i need to do it with JS – facebook-1389780026 Commented Nov 8, 2011 at 22:23
• 2 @facebook-1389780026 — Use CSS instead of <font> not instead of JS – Quentin Commented Nov 8, 2011 at 22:25

5 Answers 5

You can set the element's color with JS as a simple solution. You should also give the element a valid href attribute that nullifies the default click behavior.

<a name="sec" href="javascript:void(0);" onclick="this.style.color='green';">
  this is a test
</a>

Try something along the lines of

<a href="#" onclick="this.style.color='green'; return false;">link</a>

And you should not use <font> tag for setting text attributes, this is considered bad practice in today’s HTML (be it XHTML or HTML5).

Something like this should work: (Psudeo Code)

<a id="sec" onClick="makeGreen()">this is a test</a>

<script type="text/javascript" charset="utf-8">

function makeGreen() {
     document.getElementById('sec').style.color('green');
};

</script>

Realistically, you should keep your semantics and your style separate. As other users have suggested, use a css class instead of modifying styles directly. This is fairly easy to do, as shown by this jsFiddle

<a href="#" id="my-link">This is a test</a>

<script type="text/javascript">
  var el = document.getElementById('my-link');
  el.addEventListener('click', function() {
    this.className = 'clicked-class';
  });
</script>

And of course in your CSS you would define some sort of rule:

.clicked-class {
  color: green;
}

This could be made even simpler with a javascript library of your choice, but hopefully should be enough to get you started.

$(element).on("click",function() {$(this).css({'color', 'blue'});