Actualmente estoy trabajando en la interfaz de usuario por primera vez y parece que estoy atascado.
Esto es lo que estoy tratando de lograr: text1 se escribe una vez que se carga la página (con el efecto de máquina de escribir). Luego, cuando el usuario hace clic en un botón, text1 desaparece inmediatamente y text2 comienza a escribirse en su lugar.
Mi función (en mi HTML tengo un párrafo con id="demo")
function typeWriter(text,speed) { for (let i = 0; i < text.length; i++) { document.getElementById("demo").innerHTML += text.charAt(i); setTimeout(typeWriter, speed); } } typeWriter("Lorem impsum", 50);El problema es que no puedo averiguar cómo pasar mi cadena en la función. El código anterior devuelve un error:
"TypeError: undefined no es un objeto (evaluando 'text.length')".
¿Qué podría hacer al respecto? ¿Cómo puedo obtener la longitud si no quiero tener una cadena "fija", ya que necesito pasar 2 textos diferentes, según los eventos?
Su error: "TypeError: indefinido no es un objeto (evaluando 'text.length')". se produce cuando el código alcanzó text.length porque el texto no está undefined . Ahora, en la primera iteración, es correcto, pero después de su setTimeout , el typeWriter de devolución de llamada no tiene ningún parámetro.
Si desea pasar parámetros a una devolución de llamada setTimeout , esta es la forma:
setTimeout(functionRef, delay, param1, param2, /* ... ,*/ paramN) Ahora, puede agregar eso, pero creo que ni siquiera necesita un bucle for. Porque luego, en cada iteración, tendrá n llamadas a setTimeout. Y cada vez que la función de devolución de llamada llamará a setTimeout.
Haciendo cambios menores en su código, puede arreglar esto:
function typeWriter(text,speed,char) { if(char < text.length){ document.getElementById("demo").innerHTML += text.charAt(char); setTimeout(typeWriter, speed,text,speed,char+1); } } typeWriter("Lorem impsum", 50,0); <div id="demo"></div> En el ejemplo anterior, hago un seguimiento del carácter pasando un índice y llamando a setTimeout exactamente una vez cada vez.