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