JavaScript Forum

**kbfirebreather** · 07-19-2008, 08:29 PM

Ok, I've spent at least 10 hours tinkering, researching, filtering results on how to get this to work, but am unsuccessful, I'm tired of this frustration and hopefully someone can help me out real quick.

I want to print each letter from a string one by one, using setTimeout (like it's being typed as you read)

this is what I got...

Code:

var type;
function writeText()
{
    var message = "this is the message";
    var messageChars = new Array();
    for (var i=0;i<message.length;i++)
    {
        messageChars[i] = message.charAt(i);
    }
    for(var i=0; i<message.length; i++)
    {
        type = setTimeout("document.write("+messageChars[i]+");", 500);
    }
}

now when I run this, and go to the error console in FF, it tells me "t, h, i, s; is not defined" Each one is not defined, and the page is constantly loading, and nothing displays on the screen.

now I've tried multiple variations of this script, including calling a function passing the character to it, and having that display each character.

I even went as far as to just using that last for loop to document.write("a"), and each time I get "a is not defined"....which makes no darn sense as to it's a character.....

so please, please show me what I'm doing wrong, wasting 10 hours for something this silly disturbs me.

**wayfarer07** · 10:26 PM

Good effort, but I believe your approach is wrong. Besides the fact that you should be enclosing the statement inside of the setTimeout in an anonymous function, there seems to be a problem with using document.write in this fashion.

Also, document write is a very bad way of putting content into a page, and should be avoided.

More elegant than setTimeout (which in the case you have written, simply sets all of the timeouts simultaneously), is its cousin, setInterval(), which executes a function at the set interval, repeatedly, until it is cleared.

I rewrote the function you gave, and plugged it into the HTML using the .appendChild DOM method, which works very well with setInterval(). Here is the complete script and HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script>
function writeText()
{
    var message = "this is the message";
    var messageChars = new Array();
    for (var i=0; i < message.length; i++)
    {
        messageChars[i] = message.charAt(i);
    }
    var i = 0;
    var intervalId = setInterval(function() {
        if(i < message.length) {
            var txt = document.createTextNode(messageChars[i]);
            document.getElementById("my-node").appendChild(txt);
        i++;
        } else {
            clearInterval(intervalId);
        }
    }, 200);
}
</script>
</head>

<body>
<p id="my-node"></p>
<script>writeText();</script>
</body>
</html>

**kbfirebreather** · 07-20-2008, 10:15 PM

Worked perfectly, thanks so much!!

**wayfarer07** · 07-21-2008, 10:10 AM

Just be sure to always place the function call at the bottom of the page, directly before the closing </body> tag.