Run a function multiple times

I made a sort of typewriter script that shows every next character of a text in a particular DIV, each milisecond.
(testing in IE, not tested in other browsers yet)

Now, after the function has run, I cannot run it again. It stops all completely.
I have put some variable in it to see it’s running or not. But that doesn’t help it anyway.

Anyone an explanation for me? Has this something to do with event bubbling or something else?

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script type="text/javascript">

window.onload = function(){

var originalDiv, output, letters; 	
var teller = 0;
var start = document.getElementById('start');
var running = "no";

function turnLetters(){
  if(teller < originalDiv.length){
      output.innerHTML = output.innerHTML + letters[teller];
      teller = ++teller;
      setTimeout(turnLetters, 1); // 1 milisecond, next letter
running = "no";

function gogogo(){
  running = "yes";
  originalDiv = document.getElementById('originalDiv').innerHTML;
  document.getElementById('originalDiv').style.visibility = "hidden";

  output = document.createElement('div');
  document.body.insertBefore(output, document.getElementById('originalDiv'));
  letters = originalDiv.split("");
  running = "no";

 start.onclick = function(){
   if(running = "no"){


#output, #originalDiv { width: 500px; }
#start { display: block; text-align: center; width: 50px; height: 20px; border: 1px solid #0099ff; /* because that is our favourite colour isnt it */ }

<div id="start">Go !</div>

<div id="originalDiv">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>

You have declared that function (and variable that it uses) inside your onload event, so it can be called only from onload event handler. Move it out of event handler.

I put it here as a demo:

The typewriter script

wow, that’s a fast typewriter :stuck_out_tongue: