Just started with Jquery - confused!

**lo_toots** · Jan 27, 2012 05:43

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!

**sdleihssirhc** · Jan 27, 2012 09:47

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:

Code JavaScript:

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

Does that help at all?

**lo_toots** · Jan 27, 2012 10:03

many thanks for your reply and yes it does help - however not working ....

<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;
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>

</head>

<body>
<p>

typeit ("does this work?")

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

**sdleihssirhc** · Jan 27, 2012 13:29

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.

HTML Code:

<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>

**lyndah** · Jan 29, 2012 17:51

Hi lo_toots.

I think your Math.floor() should really be Math.ceil() otherwise I don't think your max speed will ever be reached.

This is how I would do it without jQuery.

Code JavaScript:

 <body>
        <p id="strOutput"></p>
        <script type="text/javascript">
            var str='qwertyuiopasd';
            var curChar=0;
            var maxspeed=2000; //milliseconds
            var txtHolder = document.getElementById('strOutput');
            function typeIt(str){
                txtHolder.innerHTML += str.charAt(curChar);
                if(++curChar < str.length){
                    setTimeout(function(){typeIt(str);},Math.ceil(Math.random()*maxspeed));
                }  
            }
            typeIt(str);
        </script>
    </body>

**lo_toots** · Jan 30, 2012 07:20

Hi

thanks sdleihssirhc - now I know why I was confused here - don't need jQuery at all!

and lyndah - still evaluating your suggestion

thanks both!

User Tag List

Thread: Just started with Jquery - confused!

Thread Tools

Display

Just started with Jquery - confused!

Bookmarks

Bookmarks

Posting Permissions