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>
[B]
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
I may have misunderstood the problem, but I think I see what’s tripping you up. You’re only defining your “typeit” function inside another function–which means it will not be in the global scope, and you will not be able to use it anywhere else.
The quick fix is to simply declare it with your other variables (text, count, maxspeed) out in the open:
var text = "";
var count = 0;
var maxspeed = 200;
var typeit; // just create it here...
$(document).ready(function(){
typeit = function (punch){ // and assign the (exact same) function here
var text = "";
var count = 0;
var maxspeed = 200;
var typeit;
$(document).ready(function(){
typeit = function (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>
First of all, it looks like you forgot to put ‘typeit(“does this work?”);’ in a <script> (not sure if this was a typo). However, even if you do that, it will fail. Stupid mistake on my part, and here’s the explanation:
The function you passed to $(document).ready will only be executed when the DOM is fully loaded. Your second script (the “does this work?” part) is trying to execute before the DOM has loaded, when the variable typeit is still undefined.
So how do we fix it? Luckily, nothing in your $(document).ready function requires the DOM. You’re just creating functions. So we don’t have to involve jQuery at all (which means that the last piece of advice I gave is irrelevant; if you’re creating the typeit function in the global scope, then you don’t have to worry about declaring the variable; you take your first script that you posted and literally just get rid of the $(document).ready(function () {}) wrapper).
Once you’ve done that, where are you allowed to use your typeit function? Well, because you hardcoded in the element that you want to use (the #box <div>), you have to wait until that DOM node has been created. Which just means: after the #box <div> in your HTML.
<head>
<script>
// create the typeit function
</script>
</head>
<body>
<script>
// this WILL NOT work
// because the #box <div> doesn't exist yet!
typeit('hello?');
</script>
<div id="box"></div>
<script>
// this WILL work
typeit('huzzah!');
</script>
</body>