How to make a simple typewriter with pure javascript?

Question

I know I could do it with jQuery, but I want to use only javascript.

I am currently using this code (demo)

<body onload="typeEffect();">
 <span id="typeArea"></span>
 <script>
  var textSpan = document.getElementById("typeArea");
  var letterPrint = 0;

  function effectOne()
  {
   textSpan.innerHTML = "H";
  }

  function effectTwo()
  {
   textSpan.innerHTML = "He";
  }

  function effectThree()
  {
   textSpan.innerHTML = "Hel";
  }

  function effectFour()
  {
   textSpan.innerHTML = "Hell";
  }

  function effectFive()
  {
   textSpan.innerHTML = "Hello";
  }
 </script>
</body>

But the result doesn't be like I wanted, it doesn't type each letter but it type a word simultaneously.

I have also tried this javascript code

var letterPrint =  0;

function playEffect()
{
 if (letterPrint == 0)
 {
  textSpan.innerHTML = "H";
  var letterPrint = 1;
 }
 else if (letterPrint == 1)
 {
  textSpan.innerHTML = "He";
  var letterPrint = 2;
 }
 else if (letterPrint == 2)
 {
  textSpan.innerHTML = "Hel";
  var letterPrint = 3;
 }
 else if (letterPrint == 3)
 {
  textSpan.innerHTML = "Hell";
  var letterPrint = 4;
 }
 else if (letterPrint == 4)
 {
  textSpan.innerHTML = "Hello";
  var letterPrint = 5;
 }
 else
 { 
  textSpan.innerHTML = "Hello";
 }
}

setInterval("playEffect()","1000");

But it gives me the same result.

How can I make typewriter effect with javascript? Or it is impossible?

Have a look at [this answer](http://stackoverflow.com/a/11665782/1048572) (which even works with real html, not only plain text contents) — Bergi, Mar 01 '15 at 11:36

sifriday · Answer 1 · 2015-03-01T18:04:28.917

2

Here's something to get you started. I've used recursion to save you having to manually type your big if/else and it shows you how to do the timeouts, too.

var message = "Hello World"

function printChar(i) {
    var output = document.getElementById("output")
    var char = message.charAt(i);
    output.innerHTML = output.innerHTML + char;
    if (i < message.length) {
        window.setTimeout(function() {
            i = i + 1;
            printChar(i);
        }, 1000)
    }
}

printChar(0);

Demo here:

http://jsfiddle.net/4c6msk8L/

Short version, out of interest (see comments):

var m = "Hello World"
function p(i) {
    document.getElementById("output").innerHTML += m.charAt(i);
    if (i<m.length) {window.setTimeout(function() {p(++i);}, 100)}
}
p(0);

edited Mar 01 '15 at 18:04

answered Mar 01 '15 at 11:21

sifriday

4,342
1
13
24

1

That's working. But I decided to use nicael's code because it is shorter, sorry. – Anakin Mar 01 '15 at 11:40
@Anakin And rmember that shorter is not always better. – Alex Mar 01 '15 at 12:52
mm, yes, I was going to say something similar. Shorter often equals harder to read and therefore harder to maintain. As an example, nicael's current answer is 180 chars long. If I don;t change the substance of my answer, but just remove spaces, shorten variables names, etc, I can get it down to 176 chars (will add to answer now). – sifriday Mar 01 '15 at 15:25
I'm not adding this to try to make you change your mind, but simply to support Alex's point about shorter is not always better. In this case the code is both functionalilty and structurally the same, but the longer version is easier to read and other people would find it easier to maintain. – sifriday Mar 01 '15 at 15:27
I just want ***simple*** typewriter effect. – Anakin Mar 01 '15 at 17:13

nicael · Accepted Answer · 2015-03-01T11:37:23.360

2

Here you go (considering you have, for example, span or div with id "tr"):

var word = "Hello, world!";
var i = 0;
var timer = setInterval(function(){
    document.getElementById("tr").innerHTML+=word[i];i++;if(i>word.length-1){clearInterval(timer)}
},100)

fiddle

edited Mar 01 '15 at 11:37

answered Mar 01 '15 at 11:21

nicael

18,550
13
57
90

why downvote... check the fiddle, it works... also it is very short :) – nicael Mar 01 '15 at 11:24
3

can't use document.write after the page loads, will wipe everything else out – charlietfl Mar 01 '15 at 11:29
@char and downvoters: ok, removed the version with document.write completely, please don't vote down :D – nicael Mar 01 '15 at 11:37

score 2 · Answer 3 · answered Mar 01 '15 at 11:33

2

You can also split the message into each characters and then use setTimeout with an increasing timeout in a Array.forEach callback.

function type(message, id) {
    var output = document.getElementById(id), i = 0;
    message.split("").forEach(function(letter){
        setTimeout(function(){
           output.innerHTML += letter;
        }, i++ * 1000);
    });
}
type("Hello Word", "output");

DEMO

answered Mar 01 '15 at 11:33

Amit Joki

58,320
7
77
95

That's working. But I decided to use nicael's code because it is shorter, sorry. – Anakin Mar 01 '15 at 11:43
@Anakin I could make it even shorter. Any way, that's okay. – Amit Joki Mar 01 '15 at 11:45

score 0 · Answer 4 · answered Mar 01 '15 at 11:14

0

Pay attention to var, which creates a local variable (hiding a variable with the same name in the outer scope).

Consider using substring instead of copy&pasting the same code. Now you have the same error in 5 places to fix.

answered Mar 01 '15 at 11:14

Has QUIT--Anony-Mousse

76,138
12
138
194

How to make a simple typewriter with pure javascript?

4 Answers4