Achieved JS typewriter effect, can't figure out how to make it loop after last array item

Question

I've achieved the typewriter effect that I was hoping for. The problem is that when it gets to the last item in the array, the loop doesn't start over, which is the effect I'm hoping to figure out how to achieve.

Heres my pen: http://codepen.io/marlee/pen/MeYOZd

And here's the code:

HTML:

<div class="normalText">Flex allows you to manage information relating to <span id="changeText">customers.</span></div>

CSS:

body {
background: #333;
color: #eee;
font-family: Consolas, monaco, monospace;
}

Javascript:

var container = document.getElementById('changeText');

var things = ['investors.','clients.', 'stakeholders.', 'students.',    'properties.'];
var t = -1;
var thing = '';
var message = container.innerHTML;
var mode = 'write';
var delay = 1000;

function updateText(txt) {
  container.innerHTML = txt;
}

function tick() {

    if(container.innerHTML.length == 0) {
        t++;
        thing = things[t];
        message = '';
        mode = 'write';
     }

switch(mode) {
    case 'write' :
        message += thing.slice(0, 1);
        thing = thing.substr(1);

        updateText(message);

        if(thing.length === 0 && t === (things.length - 1)) {
            window.clearTimeout(timeout);
            return;
        }

        if(thing.length == 0){
            mode = 'delete';
            delay = 1500;
        } else {
            delay = 32 + Math.round(Math.random() * 40);
        }

        break;

    case 'delete' :
        message = message.slice(0, -1);
        updateText(message);

        if(message.length == 0)
        {
            mode = 'write';
            delay = 1500;
        } else {
            delay = 32 + Math.round(Math.random() * 100);
        }
        break;
    }

    timeout = window.setTimeout(tick, delay);
}

var timeout = window.setTimeout(tick, delay);

Answer 1

I changed it.

You can see the differences here : https://www.diffnow.com/?report=diqrj

 var container = document.getElementById('changeText'); var things = ['investors.','clients.', 'stakeholders.', 'students.', 'properties.']; var t = -1; var thing = ''; var message = container.innerHTML; things.push(message); var mode = 'write'; var delay = 1000; function updateText(txt) { container.innerHTML = txt; } function tick() { if(container.innerHTML.length == 0) { t = (t+1) % things.length; thing = things[t]; message = ''; mode = 'write'; } switch(mode) { case 'write' : message += thing.slice(0, 1); thing = thing.substr(1); updateText(message); if(thing.length == 0){ mode = 'delete'; delay = 1500; } else { delay = 32 + Math.round(Math.random() * 40); } break; case 'delete' : message = message.slice(0, -1); updateText(message); if(message.length == 0) { mode = 'write'; delay = 1500; } else { delay = 32 + Math.round(Math.random() * 100); } break; } timeout = window.setTimeout(tick, delay); } var timeout = window.setTimeout(tick, delay); 

 body { background: #333; color: #eee; font-family: Consolas, monaco, monospace; } 

 <div class="normalText">Flex allows you to manage information relating to <span id="changeText">customers.</span></div>