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.

Without code, most of us who could help would really be in the dark as to what you are trying to do. — rfornal, Dec 07 '14 at 13:11
[Here's a hacky solution](http://jsfiddle.net/chipChocolate/uvgv7jo5/) — Weafs.py, Dec 07 '14 at 13:14
@chipChocolate.py Man, that's clever, simple and smart I needed that code to work with words, I changed some stuff according to chip, now my problem is that the initial frame is empty... I mean, words start appearing after one second, why? — , Dec 07 '14 at 13:32
[Try this.......](http://jsfiddle.net/chipChocolate/uvgv7jo5/1/) — Weafs.py, Dec 07 '14 at 13:35

score 1 · Answer 1 · answered Dec 07 '14 at 13:15

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

Roko C. Buljan · Answer 2 · 2014-12-07T13:53:22.587

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.

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

2 Answers2