How to change the innerText of an <a> using javascript

Question

When I click on the "show details" link it should change to "hide details". I tried the following code but it's not working:

out.print("<a href=\"javascript:parent.showHideDetails('"+id+"',this);\">show details</a>");

function showHideDetails(id,obj) {
    try
    {

        alert(obj.innerText);
        obj.innerText = 'hide details';
    }
    catch (err)
    {
        alert(err);
    }

}

Answer 1

The problem is that this in your href attribute doesn't point to the anchor. You could pass an identifier there, and give the anchor element the same identified as id attribute; and then use document.getElementById to get the anchor.

Example:

out.print("<a href=\"javascript:parent.showHideDetails('"+id+"','anchor_1');\" id=\"anchor_1\">show details</a>");

function showHideDetails(id,identifier) {
    try
    {
        var obj = document.getElementById(identifier);
        alert(obj.innerText);
        obj.innerText = 'hide details';
    }
    catch (err)
    {
        alert(err);
    }
}

Answer 2

The details in your question are sparse. Here are a few possibilities:

Remove parent. from the inline handler, and change it to an onclick:

"<a href=\"#\" onclick=\"javascript:showHideDetails('"+id+"',this);\">show details</a>"

Perhaps the showHideDetails() function isn't global

Perhaps innerText isn't supported in the browser you're using. Try innerHTML instead.

obj.innerHTML = 'hide details';