jQuery text rotation function not working with parameters

Question

I searched around for a text rotation engine in jQuery, because I didn't know how to do it. I found an answer here on StackOverflow: changing text periodically in a span from an array with jquery

The code that I found that worked:

var terms = ["term 1", "term 2", "term 3","term 4","term 5","term 6","term 3"];

function rotateTerm2() {

  console.log($("#rotate").data("term"));  //debug 1

  var ct = $("#rotate").data("term") || 0;
  console.log(ct);
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
      .delay(2000).fadeOut(400, rotateTerm2);
}
$(rotateTerm2);

This worked well and I could just add new strings to my array and edit the animation timing. However, I wanted to edit this to a function using parameters, that I can put in A script and import it when needed. I planned 4 parameters:

1. Which element to change
2. The array that contains the strings to what the text will be changed to
3. The delay / the time the display will stay (simple jquery .delay)
4. the fadeOut speed.

Now my code looked like this:

var terms = ["term 1", "term 2", "term 3","term 4","term 5","term 6","term 3"];

function rotateTerm(changeE,Rterms,delay,fadeSpeed) {
  var element = "#" + changeE;

  console.log(element);          //debug 1
  var ct = $(element).data("term") || 0;


  console.log($(element).data("term"));  //debug 2
  console.log(ct);            //debug 3
  $(element).data("term", ct == Rterms.length -1 ? 0 : ct + 1).text(Rterms[ct]).fadeIn()
              .delay(delay).fadeOut(fadeSpeed, rotateTerm);
}
rotateTerm("rotate",terms,2000,400);

However, this didn't work, I got an Error:

TypeError: Rterms is undefined

which real confused me, because I was sure that this would be a piece of cake just passing the values and using the value variables instead of the values themselves. So I tried debugging as seen in my code, I console.log'ged the variable I got the error and the other variables and compared them to the console.logs of the working function, and I found out that the error appears after the function ran the second time, with the outputs of the console logs being the following:

rotate textRotate.html:44:5
undefined textRotate.html:52:5
0

and then right after, the second time was this:

undefined textRotate.html:44:5
undefined textRotate.html:52:5
0

and the third time raised the error.

I noticed that the element changed to "#undefined" for some strange reason I dont understand. I thought that since the array (second parameter) raised a type error, I looked up whether I made a mistake and javascript needs some special conditions to be able to use an array as an parameter, but I think it doesnt since I didnt find any reference. I tried the ... operator thing in the parameter section for my array but it didnt work either.

Now my Question, is there any way to turn:

function rotateTerm2() {

  console.log($("#rotate").data("term"));  //debug 1

  var ct = $("#rotate").data("term") || 0;
  console.log(ct);
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
             .delay(2000).fadeOut(400, rotateTerm2);
}
$(rotateTerm2);

to a engine-like function with parameters for the element, array with values that the element is changed to, the delay and the animation speed? I would really appreciate some help, I'm really new to jQuery and I dont get the reason why my array and my element are suddenly undefined.

Answer 1

Your fadeout wasn't being called with rotateTerm with same arguments, hence rTerms was undefined

  .fadeOut(fadeout, function(){
    rotateTerm( $element, terms, delay, fadeout )
  });

Demo

var terms = ["term 1", "term 2", "term 3"];

function rotateTerm( $element, terms, delay, fadeout ) 
{
  var ct = $element.data("term") || 0;
  $element.data("term", ct == terms.length - 1 ? 0 : ct + 1).text(terms[ct]).fadeIn().delay(delay)
  
  .fadeOut(fadeout, function(){
    rotateTerm( $element, terms, delay, fadeout )
  });
}

rotateTerm( $("#rotate"), terms, 2000, 200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>