JavaScript text changing over time back and forth (ex.:1,2,3,2,1,2,3,2,1,2,3...)

Question

I need a JS to change a word three times every second, I found many info about it but I can't find out how to make it reversible... Basically I need this frame setting 1>2>3>2>1>2>3>2>1 and so on.

Edit: Maybe my talking with numbers wasn't very useful, I need to work with words, here's an example of what I'm working with... thanks to @chip this problem is no more:

var text = ["MARK", "AND", "TONY", "AND"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 1000);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}

My only problem now is this (maybe I should start another post 'cause things are getting afar...) the "changeText" div you see there it's inserted in a CSS animation I'll post next, the problem is that the first frame of that animation is wordless, in fact from the 2nd second "AND" (the second word) appears, why is there a blank frame?

div {
  font-family: REVOLUTION;
  font-size: 150px;
  text-align: center;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 0 0;
  background: indianred;
  transform: rotate(90deg);
  -webkit-animation: square-to-circle 2s .5s infinite cubic-bezier(1, .015, .295, 1.225) alternate;
}
@-webkit-keyframes square-to-circle {
  0% {
    border-radius: 50% 50% 0 0;
    background: indianred;
    transform: rotate(90deg);
  }
  50% {
    border-radius: 50% 0 0 0;
    background: darksalmon;
    transform: rotate(45deg);
  }
  100% {
    border-radius: 0 0 0 0;
    background: coral;
    transform: rotate(0deg);
  }
}

Thanks for helping, it's my first time with all this stuff.

Answer 1

You can use a counter and a direction:

var counter = 1;
var direction = 1;

setInterval(function() {
    counter += direction;
    if (counter < 1 || counter > 3) {
        // Whoops, we passed the limit: bounce back.
        direction = -direction;
        counter += 2*direction;
    }
    document.getElementById("mydiv").textContent = "counter is " + counter;
}, 333); // 333ms = 3 times per second

Answer 2

var num = document.getElementById("text"),
    arr = ["Tony", "Mark"],
    c = 0;

function loop(){
  num.innerHTML =  ++c%2 ? arr.reverse()[1] : "and";
}

setInterval(loop, 1000);

<p id="text"></p>

To explain the idea above:

set into an Array the two names ["Tony" ,"Mark"] to flip them we can use the Array.prototype.reverse method. So far so good, but than we'll get only:

Tony > Mark > Tony > Mark > Tony > Mark ...

but if we set a counter c and increment it infinitely, using a %2 reminder we can get this values 1,0,1,0,1,0,... OK what about it?

Inside a Conditional Operator: statement ? do this if true : to this if false
we can use the counter's swapping 0 and 1 as truthy/falsy statements!

So on every odd (1) we use the swapped array "Name",
and on every even (0) we use the "and" string. That's it.