Issue

This Content is from Stack Overflow. Question asked by Learning Smart

I have a text that is in an array and loops through the array and displays it.

What I am trying to do is get the text to change position at random within the set interval.

I created a setinterval that lets the array go through each text evevry 5 seconds, I am just not sure if I am on the right track regarding the position changing every 5 seconds as well.

let textElement = document.querySelector("p")

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


const randomPos = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

let index = 0;
textElement.innerText = textArray[index]

setInterval(() => {
  index = (index + 1) % textArray.length
  textElement.innerText = textArray[index]
    textElement.style.left = randomPos(0, 300 - 200) + "px";
    textElement.style.top = randomPos(0, 300 - 200) + "px";
}, 5000)

.background {
  background: var(--light--colour);
  height: 88.4vh;
}

p {
  height: 2em;
  position: absolute;
  font-size: 32px;
  color: var(--darkest--colour);
  width: 12em;
  animation: slidesdown 5s ease infinite;
  margin-top:-8em;
  height:7em;
  margin-left: 10em;
}

@keyframes slidesdown {
  0%,
  50% {
    transform: translate(0, 0em);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 1em);
    opacity: 0;
  }
}

<div class="background"></div>

<p></p>
</div>

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.