Agfdhyk

So i want to set a vanilla JavaScript to display a message screen text for 30-40 seconds then display a different text for 10 seconds. The first message should change in particular order (ie.. hello, world, i ,love java, script). And cycle through. I tried to put it in an a array with a timer but no luck can't get the timer to oscillate between the 30 and 10 seconds.
So ie... hello for 30 sec, then world for 10 sec, then i love for 30 sec and so on.
Currently I'm following this example but I'd rather not do the math there's got to be a cleaner better way.
https://www.w3schools.com/jsref/met_win_settimeout.asp

This what i am doing now. Abbreviated

function timedText() {

    setTimeout(myTimeout1, 10000) setTimeout(myTimeout2, 30000) setTimeout(myTimeout3, 40000)

}



function myTimeout1() {

    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Mountin Climbers</h2>";

}



function myTimeout2() {

    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: red; color: white; text-align: center;'>REST</h2>";

}



function myTimeout3() {

    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Inch Worms</h2>";

}

Why not just have two functions, one that sets the other and vice versa?

function one() {

  window.alert('Messsage One')

  setTimeout(two, 10*1000);

}



function two() {

  window.alert('Message two');

  setTimeout(one, 30*1000);

}



setTimeout(two, 30*1000);

Obviously, you could change the window.alert calls to whatever method you're actually using for displaying the text.

EDIT
Ok, to update based on your request. If you want an array of words to cycle, and varying times, I've done it this way. Given the HTML:

<div id='msgBox'></div>

You can setup an array and a function to display from that array like so:

var msgBox = document.getElementById('msgBox');

var messages = ['hello', 'world', 'i' ,'love', 'java', 'script']



function updateMessage() {

  // take the first word out of the array and store it in the msg variable

  var msg = messages.shift();

  // set the div content to the word

  msgBox.innerHTML = msg;

  // pick a duration based on if the remaining array length is odd or even

  var duration = messages.length % 2 ? 10 * 1000 : 30 * 1000

  // queue up the next message update

  setTimeout(updateMessage, duration)

}



setTimeout(updateMessage, 10*1000)

Obviously, you can tweak the duration bit however you want; I just did a modulo operation so that basically if the array length is even you wait 10 seconds if it's odd you wait 30 seconds.

Likewise if you want to update the inner content to include other information (e.g. like you had an h2 with various styles) you can either put that whole string in the array, or you can use something similar to my duration logic to select the correct wrapper.

Here's the fiddle

you can do something like below!

you can modify timeout interval as per your requirement

function myTimeout1() {

    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Mountin Climbers</h2>";

    setTimeout(myTimeout2,3000);

}



function myTimeout2() {

    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: red; color: white; text-align: center;'>REST</h2>";

    setTimeout(myTimeout3,5000);

}



function myTimeout3() {

    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Inch Worms</h2>";

    setTimeout(myTimeout1,2000);

}

myTimeout1();

<div id="tebatademo">

</div>

Best way to do it with OOP.

function Timer(fn, delay) {

  this.startTimer = function(fn, delay) {

    setTimeout(fn, delay);

  }

  return this;

}



function timedText() {

  let timer1 = new Timer();

  let timer2 = new Timer();

  let timer3 = new Timer();

  timer1.startTimer(myTimeout1, 1000);

  timer2.startTimer(myTimeout2, 3000);

  timer2.startTimer(myTimeout3, 4000);

}



function myTimeout1() {

  document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Mountin Climbers</h2>";

}



function myTimeout2() {

  document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: red; color: white; text-align: center;'>REST</h2>";

}



function myTimeout3() {

  document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Inch Worms</h2>";

}



timedText();

<div id="tebatademo"></div>

In case if you need to add other functionality of timer in future, you can easily add and remove it not needed anyone.

Hope this helps!