Suppose I have this HTML code...how do I bold the text inside onclick?

Question

<a href="" onclick="runstuff();return false;">Item</a>

After executing runstuff(), I want to use JQuery to make Item bold. Will I need an "id"? What about "self"?

Answer 1

With jQuery, you ought to bind to an attribute or class on the link itself. For instance:

<a href="foo.html" class="makeBold">Click Me</a>

$("a.makeBold").click(function(e){
  e.preventDefault();
  $(this).css("font-weight", "bold");
});

Of course, that's a CSS solution. You can allso wrap the element in <b> or <strong> tags:

$("a.makeBold").click(function(e){
  e.preventDefault();
  $(this).wrap("<strong>");
});

Answer 2

The A you clicked will be 'this' in your example, so just define runstuff:

function runstuff() {
    jQuery(this).css("font-weight", "bold");
}

Answer 3

I don't know if it would bolden the text before or after runstuff() ran, but I would expect this would work:

$('a[onclick^=runstuff]').click(function(){
      $(this).css("font-weight", "bold");
});

Perhaps you could ensure it would run after runstuff() by using jQuery to change the onclick attribute? Something like

$('a[onclick^=runstuff]').attrib('onclick','runstuff();boldtext();return true;');

Then you'd have to define boldtext()

Answer 4

You can try to modify your HTML into:

<a href="#" onclick="runstuff(this);return false;">Item</a>

And, you can have the script like:

function runstuff(link) {
    jQuery(link).css("font-weight", "bold");
}