Estoy tratando de crear una función de "máquina de escribir" y usarla para definir una variable, de modo que cada carácter se agregue individualmente en función de una función de tiempo de espera. El problema es que solo está definiendo el primer carácter del texto.
<!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <p id="demo"></p> <script> var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; var x = "" ; x = typeWriter() ; function typeWriter() { if (i < txt.length) { x += txt.charAt(i) ; i++; setTimeout(typeWriter, speed); return x ; } } document.getElementById("demo").innerHTML = x ; </script> </body> </html>** Esto se basa en el ejemplo práctico de la máquina de escribir de W3School. www.w3schools.com **
Tuviste algunos errores:
lo más importante, y la razón por la que no veía actualizaciones: la línea document.getElementById("demo").innerHTML = x; se estaba ejecutando solo una vez, cuando la página se cargó por primera vez. Su función typeWriter estaba actualizando x , pero el valor de x nunca se reflejaba en la interfaz de usuario
no desea configurar x = typeWriter() , ya que esto sobrescribe la cadena vacía que configuró correctamente inicialmente como x , y significa que su función está tratando de agregar una cadena de 1 carácter a una función, lo que producirá un resultado sin sentido . No le importa qué devuelve typeWriter (por eso también eliminé el return x de él; esa línea no hace daño pero es completamente irrelevante de todos modos), solo quiere ejecutarlo, así que reemplacé esa línea con simplemente typeWriter() . La parte importante es que ahora x comienza como la cadena vacía, como quieras.
Vea la versión de trabajo aquí con los puntos anteriores corregidos:
<!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <p id="demo"></p> <script> var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; var x = "" ; typeWriter() ; function typeWriter() { if (i < txt.length) { x += txt.charAt(i) ; i++; setTimeout(typeWriter, speed); document.getElementById("demo").innerHTML = x ; } } </script> </body> </html>Otra forma de hacer lo mismo:
<!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <p id="demo"></p> <script> var txt = 'Lorem ipsum dummy text blabla.'; Array.from(txt).map((v,i,a)=>{setTimeout(()=>{document.getElementById("demo").innerHTML+=v;},50*(i+1));}) </script> </body> </html>