How to change the text of an anchor when clicked with the mouse?

This is my website. http://www.sarahjanetrading.com/js/j/index.html All the code+images+css is there with access to anyone

When anyone clicks on the listen button its background changes into the stop listening and vice versa. This is the functionality I wanted and I got it using jQuery.

What I also want now is the text to change too accordingly. Like, when someone clicks on the "listen" anchor, its text should change to "stop listening", and the same for the stop listening anchor. Like a tog开发者_C百科gle anchor.

Thanks for the help ! Really appreciate it... :)

$("#first").toggle(function(){
    $(this).text("Stop listening");
}, function(){
    $(this).text("Listen");
});

Online demo: http://jsfiddle.net/5AUdJ/

UDPATE

I see you are using a class to control the listen/stop state. Maybe this will work better.

$("a").click(function(){
    if($(this).is(".listen")){
        $(this).text("Stop listening").removeClass("listen");
    } else {
        $(this).text("Listen").addClass("listen");
    }
});

Here, I made this JSFiddle using your source code.

http://jsfiddle.net/K4Njj/2/

Here is the jQuery code:

$(function(){
    $("#container a").click(function(){
        if ($(this).html() == "Stop Listening")
        {
            $(this).html("Listen");
        }
        else if ($(this).html() == "Listen")
        {
            $(this).html("Stop Listening");
        }
    });
});

That will simply check to see if the text on the anchor is "Stop Listening" or "Listen" and if it is, it will switch it when you hit the button. It's really the most elegant solution.

In your Javascript, you can use the innerHTML property to access and/or change the HTML text of an element.

getElementById("first").innerHTML = "newtext"