el siguiente código javascript no puede iterar a través de la matriz textArray y continúa imprimiendo solo la cadena más larga, es decir, "una tecnología" por alguna razón.
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>Agradecería mucho si alguien me puede ayudar con esto.
Parece que su setInterval se estaba disparando antes de que se pudiera borrar el texto, y debido a esto, textArrayIntex todavía estaba en el mismo índice cuando la segunda y otras veces se estaba disparando setInterval .
<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>También se corrigieron algunos errores menores :) ¡buen código en general!
También debe consultar la biblioteca Typed.js , puede ayudarlo a hacer que las animaciones de "escribir" sean más fáciles y personalizables, aquí hay un ejemplo:
<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>