The following script works fine:



<html>
<head>
Test Typewriter script

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

var text = "";
var count = 0;
var maxspeed = 200;

$(document).ready(function(){

function typeit(punch){
text=punch;
type();
}


function character(start, end, text){
return text.substring(start, end);
}

function type(){
var random = Math.floor(Math.random() * maxspeed);
setTimeout(type, random);
$('#box').append(character(count, count+1, text));
count++;
}


typeit("This should be output like a typewriter");


});

</script>


</head>

<body>
<p>
<div id="box"></div>
</body>
</html>



But I'd like to call the typeit function within the body

i.e Use the typeit function by sending the text to the function and have it applied to one or more divs

- and can't figure out how to do it.

Can someone help? - thanks!