Using javascript to let text appear per character

Question

Okay so for a project at school we want to make a simple web-based application. I am using cordova but I'm experiencing some difficulties with jquery. The idea is to make a console-like animation to display text, so the text will appear per character.

This is my index.html

<!DOCTYPE html>
<html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href"index.css" />
        <link rel="stylesheet" type="text/css" href"css/jquery.mobile-1.4.5.css" />

        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

        <script language="javascript">
            $(document).ready(function() {

                var text = "example text";

                for (i = 0; i < text.length; i++) {
                    setTimeout(function(){
                        $("#text").text(text.substr(0, i+1));
                    }, i * 500);
                }
            });
        </script>

        <title>TEST</title>
    </head>
    <body>

        <div data-role="page" data-theme="a" id="Page1">
            <div data-role="content" data-theme="a" id="Page1_Content" >
                <label id="text"></label>
            </div>
        </div>

    </body>
</html>

So I'm using a bit of javascript code to loop through every character of the example text, and change the text in the label to a substring of the example text.

But when I run this on the device, the text just instantly appears.

EDIT:

So I changed it to Canvas' bit of code, but now the text doesn't appear at all. Im most likely missing a semicolon or something, feeling so stupid right now :(

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {

                var text = "example text";
                var i = 0;

                var consoleTyper = setInterval(function () {
                    if (i != text.length) {
                        i += 1;
                        $("#text").text(text.substr(0, i));
                    }
                    else
                    {
                        clearInterval(consoleTyper);   
                    }

                    console.log(i);
                }, 50);
            });
        </script>

        <title>B.O.X.</title>
    </head>

    <body>
        <div id="text"></div>
    </body>

</html>

Canvas · Accepted Answer · 2015-11-13T15:40:21.987

jsFiddle : https://jsfiddle.net/35j178ho/

javascript

$(document).ready(function () {

    var text = "example text";
    var i = 0;

    var consoleTyper = setInterval(function () {
        if (i != text.length) {
            i += 1;
            $("#text").text(text.substr(0, i));
        }
        else
        {
         clearInterval(consoleTyper);   
        }

        console.log(i);
    }, 50);
});

I did copy your code into jsFiddle and it didn't work for me, so I updated the code and got it work :). I have provided a jsFiddle above. Basically all I have done is created a setInterval which I store in a variable so once all of the text has been displayed, we can clear the setInterval to stop it running any longer.

pure javascript solution

jsFiddle : https://jsfiddle.net/7abvrbxu/

$(document).ready(function () {

    var text = "example text";
    var i = 0;

    var consoleTyper = setInterval(function () {
        if (i != text.length) {
            i += 1;
            document.getElementById("text").innerHTML = text.substr(0, i);
        }
        else
        {
         clearInterval(consoleTyper);   
        }

        console.log(i);
    }, 50);
});

@DaanGruijters have you included jQuery? You are using `$("#text")` this is a jQuery selector. If you just want to use javascript look at my second answer, also you can remove the `console.log` line that is just for debugging to help you out — Canvas, Nov 13 '15 at 15:40

score 0 · Answer 2 · edited May 23 '17 at 12:03

You could try and use setInterval instead of setTimeout. The script would look something like this:

            $(document).ready(function() {
               var text = "example text";
               var duration = text.length;
               var counter = 0;
               var intervalId = null;
               var interval = 500;

               intervalId = setInterval(function(){$("#text").text(text.substr(0, counter+1));counter++;}, interval);
               setTimeout(function(){clearInterval(intervalId);}, duration * interval);                 
            });

EDIT:

Your problem is explained in detail in this post: setTimeout in for-loop does not print consecutive values

That way you can also try the approach with setTimeout.

Using javascript to let text appear per character

2 Answers2