Looking for a way to use vanilla JavaScript to display alternating text screens - one set of messages for 30-40 seconds, followed by another set for 10 seconds. For example, cycling through messages like "hello", "world", "I love java script". Trying to achieve this with an array and timers but struggling to make the transition happen smoothly between 30 and 10-second intervals. Instead of doing the math manually, I'd like a cleaner solution. Following an example from W3Schools but seeking a more concise method.
Current approach:
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;'>Mountain 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>";
}