Typewriting effect using a nested for loop [duplicate]

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);
    
}

Answer 1

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"/>