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?
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test</title>
<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');
output.setAttribute('id','output');
document.body.insertBefore(output, document.getElementById('originalDiv'));
letters = originalDiv.split("");
turnLetters();
running = "no";
}
start.onclick = function(){
if(running = "no"){
gogogo();
}
}
}
</script>
<style>
#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 */ }
</style>
</head>
<body>
<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>
</body>
</html>