the following javascript code fails to iterate through the textArray array and keeps on printing only the longest string i.e., "a Technology" for some reason.
const typedTextSpan = document.querySelector(".typed-text");
const textArray = ["a Technology", "a Science", "an Art"];
const typingDelay = 300;
const erasingDelay = 200;
const newTextDelay = 2500;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if(charIndex<textArray[textArrayIndex].length) {
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
setTimeout(erase, newTextDelay);
}
}
function erase() {
if(charIndex>0) {
typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
}
}
document.addEventListener("load", setInterval(type, newTextDelay + 250));<span class="typed-text"></span>I would very much appreciate if someone can help me through this.
Seems like your setInterval was being fired before the text could be wiped, and because of this, textArrayIntex was still in the same index when the second and other times setInterval was firing.
<span class="typed-text"></span>
<script>
const typedTextSpan = document.querySelector(".typed-text");
const textArray = ["a Technology", "a Science", "an Art"];
const typingDelay = 100;
const erasingDelay = 50;
const newTextDelay = 1000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
textArrayIndex++;
if (textArrayIndex == textArray.length) textArrayIndex = 0;
// Type next word, after updating textArrayIndex.
type();
}
}
window.onload = type;
</script>Also fixed some minor bugs :) overall good code!
Also you should checkout the Typed.js library, it may help you make the "typing" animations easier and more customizable, here's an example:
<p>This is <span class="typed"></span></p>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
// For more examples check: https://github.com/mattboldt/typed.js
// Full docs at: https://mattboldt.github.io/typed.js/docs/
const options = {
strings: ["a Technology", "a Science", "an Art"],
typeSpeed: 40,
backSpeed: 40,
backDelay: 2000,
loop: true,
};
// We'll bind the typing animation to the .typed class.
let typed = new Typed('.typed', options);
</script>