How to iterate through an array with a settimeout

Question

I am trying to have text that is in an array that loops through the array and renders on the screen with the CSS animations and has a seconds delay through each change. My executable code will give an idea what I am trying to achieve

HTML

 
   
    Are you looking for a quick learner?
   
  
   
    Someone who is ever evolving?
   
   
     
       Someone who is strives to improve their knowledge?
    
    
     
      Someone who loves problem-solving and finding solutions?
   
   
     
       Someone who has the tenacity to succeed?

JS

let first = document.querySelector(".first p")
let second = document.querySelector(".second p")
let third = document.querySelector(".third p")
let fourth = document.querySelector(".fourth p")
let fifth = document.querySelector(".fifth p")

let textArray =[first,second,third,fourth,fifth]
let textArrayShow = []

function AnimationTimer(){
  for(let i =0; i < textArray.length; i++){
    console.log(textArray[i])
  }

  textArray.forEach(() => {
    setTimeout(5000)
  });
}

AnimationTimer()

So the end result needs to be, it needs to animate that when it slides down it changes to the next text in the array and it needs to repeat itself over and over.

Its meant to be a selling point of the kind of person I am.

JeanJacquesGourdin · Answer

So if I understand right you want to do this :

let textElement = document.querySelector("p")
let textArray =[
  "Are you looking for a quick learner?",
  "Someone who is ever evolving?",
  "Someone who is strives to improve their knowledge?",
  "Someone who loves problem-solving and finding solutions?",
  "Someone who has the tenacity to succeed?"
]
let index = 0
textElement.innerText = textArray[index]

setInterval(()=>{
  index = (index +1)%textArray.length
  textElement.innerText = textArray[index]
}, 1000)

How to iterate through an array with a settimeout

1 Answers