How to change the innertext of an a using JavaScript?

Question

Below is the code I’ve which should change to “hide details” when I click on “show details”:

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);

    }

}

But it’s not working properly. Can anyone tell me what I’m doing wrong here?

Answer 1

You should point the href attribute to the anchor element with the same ID. Then you can use the document.getElementById to get the anchor like below: 

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);

    }

}

Interested in Java? Check out this Java tutorial by Intellipaat.