Restart fade in fade out loop text array

I'm trying to display elements from an array of text from a button click. The elements all display correctly the first time, but if I click on the button again nothing happens. I tried to adapt the code from here: changing text periodically in a span from an array with jquery

var terms = ["term 1", "term 2", "term 3"]; //array of terms to rotate

function rotateTerm() {
var ct = $("#rotate").data("term") || 0;
if (ct == 3) return;
$("#rotate").data("term", ct == t开发者_如何学JAVAerms.length -1 ? 0 : ct + 1).text(terms[ct])
  .fadeIn().delay(2000).fadeOut(200, rotateTerm);
}

My HTML is:

<form>
<input type="button" value="200 wpm" onclick="rotateTerm()" />
</form>
<p><span id="rotate"></span></p>

Thanks for you help

What do you meanwith "nothing happens"?What should happen?I have setup a fiddle and when you press the button the terms start appearing correctly ando continue to cycle indefinitely. What should happen?

fiddle here: http://jsfiddle.net/nicolapeluchetti/KwTWZ/

EDIT - if you just want to rotate once and then rotate again if you press the button, you could do:

var terms = ["term 1", "term 2", "term 3"]; //array of terms to rotate

function rotateTerm() {
    var ct = $("#rotate").data("term") || 0;

    if (ct == 3) {
        $("#rotate").data("term", 0)
        return;
    }
    $("#rotate").data("term", ct == terms.length ? 0 : ct + 1).text(terms[ct]).fadeIn().delay(2000).fadeOut(200, rotateTerm);
}

fiddle; http://jsfiddle.net/nicolapeluchetti/KwTWZ/1/