Estoy tratando de agregar texto de una matriz a html. Tomaré una palabra a la vez de la matriz y la agregaré al html y quiero mantener esa palabra en html durante 5 segundos, luego borraré esa palabra y agregaré la siguiente palabra de la matriz al html.
Lo probé durante una hora y media para hacer esto. pero no puedo entender cómo
a continuación está mi código de muestra
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <div> <h1>Hello</h1> <span id="change-text"></span> </div> <script> let texts = ["Alexa", "siri", "Google"] let text = document.getElementById("change-text"); setInterval(() => { texts.forEach((element) => { text.innerText = element; }); }, 5000); </script> </body> </html>Soy novato en javascript, probé setInterval y forEach para hacer pero me equivoqué.
No use loop dentro de una función setInterval , en su lugar use un contador.
¿Cuál es el problema con el código?
Está utilizando Array.forEach dentro de la función setInterval . Lo que esto hace es recorrer la matriz cada vez que el intervalo cuenta. Dado que está sobrescribiendo el controlador de su DOM, primero escribe el primer elemento de la matriz que es "Alexa" . A continuación, actualiza el mismo elemento con "siri" y luego con "Google" . Estas tres actualizaciones ocurren cada vez que se ejecuta la función dentro setInterval . Solo verá el resultado de la última itración, que es "Google" , por eso su nodo DOM siempre es "Google" .
¿Cómo arreglar este problema?
Tienes que actualizar la lógica. La lógica debería ser que la actualización de DOM debería ocurrir solo una vez por ejecución de la función setInterval . Seguí la siguiente lógica.
counter con valor 0setInterval , actualice el valor con el valor obtenido después de la división por 3.setInterval let texts = ["Alexa", "siri", "Google"] let text = document.getElementById("change-text"); let index = 0; setInterval(() => { index %= 3; text.innerText = texts[index]; index++; }, 1000); <h1>Hello</h1> <span id="change-text"></span>