How to create typewriter effect?

Question

I'm trying to create a typewriter function for a school project and i'm not sure why its not working

HTML code:

<h1 id="typewriter"></h1>

Javascript code:

typewriter();

function typewriter() {
    var textArray = text1.split("");
    for (var i = 0; i < textArray.length; i++) {
        document.getElementById('typewriter').innerHTML = textArray[i];
        setTimeout(typewriter, 80);
    }
}

Thanks in advance for the help!

I think you're confused by the way `setTimeout` works. It does **not** block the loop until 80ms have passed, it schedules a call to `typewriter()` in 80ms. — Al.G., Aug 06 '20 at 11:04
Actually i'm not entirely sure how setTimeout works i was searching online for a typewriter effect and saw that almost all typewriter effect codes used setTimeout — Student_studying_FED, Aug 06 '20 at 11:07

score 4 · Accepted Answer · answered Aug 06 '20 at 11:11

I think you're looking for something like this:

You set a timeout for every char of the string, but give every timeout additional delay

So the first char will be written after 0ms delay
The second after 100ms delay
The third after 200ms delay
And so forth

Example:

function typewriter(element, text, delay = 100) {
  for (let i = 0; i < text.length; i++) {
    setTimeout(() => {
      element.innerHTML += text[i];
    }, delay * i);
  }
}

const el = document.getElementById("typewriter");
typewriter(el, "Lorem ipsum dolor sit amet");

<h1 id="typewriter"></h1>

score 2 · Answer 2 · answered Aug 06 '20 at 11:29

Using modern async/await makes things like this nice and simple.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function typewriter(element, text, delay = 100) {
  for (let i = 0; i < text.length; i++) {
    await sleep(delay);
    element.innerHTML += text[i];
  }
}

const el = document.getElementById("typewriter");
typewriter(el, "Lorem ipsum dolor sit amet");

<h1 id="typewriter"></h1>

score 0 · Answer 3 · answered Aug 06 '20 at 11:13

0

You need to setInterval to trigger the function multiple times. Set time out it fires just once when the time came

text = text.split("")

function typewriter() {
    document.getElementById('typewriter').innerHTML += text.shift();
}


setInterval(typewriter, 1000);

answered Aug 06 '20 at 11:13

agentp

335
4
17

1

You should cancel the interval after it has finished, otherwise it will keep spamming `"undefined"` – FZs Aug 06 '20 at 11:29

score 0 · Answer 4 · answered Aug 06 '20 at 11:47

Use this way it will work.

var i = 0;
var text = "Hello World!!";
typewriter();
function typewriter() {
    debugger;
    if (i < text.length) {
        document.getElementById('typewriter').innerHTML += text.charAt(i);
        i++;
        setTimeout(typewriter, 100);
    }
}

How to create typewriter effect?

4 Answers4