Typewriting effect using a nested for loop

Question

I understand there are other ways to create a typing effect but I can't seem to figure out the logic of using nested for loop.

var changingtext = document.querySelector(".text");

var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";



window.addEventListener("DOMContentLoaded", function(){
    type();
});

function type(){
    setTimeout(function(){

        for(var i=0; i<arr.length; i++){
            length = arr[i].length;
            for(j=0; j<length;j++){
                letter += arr[i].charAt(j);
                changingtext.textContent = letter;
                console.log(letter);
            }

        }
    }, 200);
    
}

What isn’t working? What is this code supposed to demonstrate? Please see [How do I add a delay in a JavaScript loop?](/q/3583724/4642212), but also [Why is “Can someone help me?” not an actual question?](//meta.stackoverflow.com/q/284236/4642212).. — Sebastian Simon, Sep 26 '21 at 00:16

dave · Answer 1 · 2021-10-26T17:59:30.680

You should just schedule the timeouts in a single loop, incrementing how long to wait:

var changingtext = document.querySelector(".text");

var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";



window.addEventListener("DOMContentLoaded", function(){
    type();
});

function type(){
  let timeout = 200;
  for(var i=0; i<arr.length; i++){
      length = arr[i].length;
      letter += ' ';
      for(j=0; j<length * 2;j++){
          if (j > length - 1) {
              letter = letter.slice(0, -1)
          } else {
              letter += arr[i].charAt(j);
          }
          timeout += 200;
          ((timeout, letter) => {
            setTimeout(() => {
                changingtext.textContent = letter;
                console.log(letter);
            }, timeout);
          })(timeout, letter);
      }

  }
    
}

<div class="text"/>

Or maybe you mean like this?

var changingtext = document.querySelector(".text");

var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";



window.addEventListener("DOMContentLoaded", function(){
    type();
});

function type(){
  let timeout = 200;
  for(var i=0; i<arr.length; i++){
      length = arr[i].length;
      letter = '';
      for(j=0; j<length * 2;j++){
          if (j > length - 1) {
              letter = letter.slice(0, -1)
          } else {
              letter += arr[i].charAt(j);
          }
          timeout += 200;
          ((timeout, letter, restart) => {
            setTimeout(() => {
                changingtext.textContent = letter;
                console.log(letter);
                if (restart) type();
            }, timeout);
          })(timeout, letter, i === arr.length - 1 && j === (length * 2) - 1);
      }

  }
    
}

<div class="text"/>

Thank you @dave but what if I want it to read, display and remove each character of each element one after the other — SEJU, Sep 26 '21 at 00:38
This definitely answers my question but only difference is how do you loop the entire array continuously. Thank you @dave — SEJU, Sep 26 '21 at 05:17
Hey can you pls update the 2nd example to delete each word slowly before jumping to the next. I tried doing it myself but I cannot seem to work out the logic. Thank you by the way @dave — SEJU, Oct 25 '21 at 19:27

Typewriting effect using a nested for loop

1 Answers1