How to create a loop in an interval function (the right way)

Question

I have been trying to replicate an example of a rotating text, but I wanted to make it infinite. However, I get it just once and I think it might be related with this logic:

Original link: https://codepen.io/galefacekillah/pen/jWVdwQ

My first attempt, applying the recursion, was based on one example in the Mozilla docs:

let nIntervId;

function checkIntervalFinish() {
  if (!nIntervId) {
    nIntervId = setInterval(RotateText, 4000);
  }
}

function RotateText() {
  var visibleWord = document.getElementsByClassName('visible')[0],

    nextWord = visibleWord.nextSibling;

  if (nextWord.nodeType == 3) nextWord = nextWord.nextSibling;
  if (!(nextWord == null)) {
    visibleWord.setAttribute('class', 'hidden');
    nextWord.setAttribute('class', 'visible');
  } else {
    clearInterval(nIntervId);
    nIntervId = null;

  }

}

checkIntervalFinish();

My second attempt was using a setTimeup. I also tried changing directly the setTimeup for the setInterval, but it didn't work. If I put a console.log, the interval function is executed infinitely, however, not this function. Although this works, it just executes once as well.

var test = function () {


  // MY FUNCTION
  var intervalID = setInterval(function () {

    var visibleWord = document.getElementsByClassName('visible')[0],
      nextWord = visibleWord.nextSibling;

    if (nextWord.nodeType == 3) nextWord = nextWord.nextSibling;

    if (!(nextWord == null)) {
      visibleWord.setAttribute('class', 'hidden');
      nextWord.setAttribute('class', 'visible');
    } else {
      clearInterval(intervalID);
    }
  }, 4000)


  // END


  setTimeout(test, 100);
};
test();

Can someone explain to me what is it that I am doing wrong? Some why, I think it is related to the null validation.