Loop through array of elements to display on browser every X seconds - html

Question

I am trying to make an array of text elements to display every X number of seconds. For example "Hello" would display and then after X seconds the text would change and display "I am 2 years old.
I am grabbing a DOM element and using .innerHTML to change the text with the dialog array elements created in javascript. I troubleshot the code and it seems like setTimeout is not working because it is not waiting every X seconds to display each array element (I have it for 5 seconds). I believe this is why I am getting only the last element to display instead of seeing each one display X number of second. Can someone help me out? I am also very new to coding.
Thanks.
Also It would be great if you can help me with creating the effect of fading the text elements in an out each time the text is changed.
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
function changeText() {
var timer = 0;
for (var i = 0; i < dialog.length; i++) {
setTimeout(document.getElementById('h1').innerHTML = dialog[i], timer);
timer = timer + 5000;
}
}
changeText();
<div id="h1">Hello</div>

Answer 1

First, you are not using the setTimeout() function correctly. Corrected version would be.
var inside for loop should be converted to let. Read why?
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
function changeText() {
var timer = 0;
// Use let instead of var
for (let i = 0; i < dialog.length; i++) {
setTimeout(() => {
document.getElementById('h1').innerHTML = dialog[i];
}, timer);
timer = timer + 5000;
}
}
changeText();
<div id="h1">Hello</div>
Its better to use setInterval() instead of setTimeout. Also initialize let elem = document.getElementById('h1'); at once not each time timer has been called.
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
let displayIndex = 0;
let elem = document.getElementById('h1');
let delay = 1000; // 1 second delay
setInterval(() => {
if (elem) {
elem.innerHTML = dialog[displayIndex];
}
// Move to the next item in dialog
displayIndex++;
// If display index goes out of index range, start again
if (displayIndex >= dialog.length) {
displayIndex = 0;
}
}, delay);
<div id="h1"></div>
Fading effect version
To get fading effect you need to change you html structure as well as javascript accordingly.
let displayIndex = 0;
let elems = $('#h1 > span');
let delay = 1000;
setInterval(() => {
elems.removeClass();
elems.addClass('hidden');
// Move to the next item in dialog
displayIndex++;
// If display index goes out of index range, start again
if (displayIndex >= elems.length) {
displayIndex = 0;
}
$(elems[displayIndex]).addClass('visible');
}, delay);
#h1 {
position: relative;
}
#h1 span {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-in-out;
transition-delay: 0s;
}
span.visible {
opacity: 1 !important;
visibility: visible !important;
}
span.hidden {
opacity: 0;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="h1">
<span class="visible">Hello,</span>
<span class="hidden">My name is James</span>
<span class="hidden">I am 2 years old.</span>
<span class="hidden">I have a dog</span>
</div>

Answer 2

setTimeout accepts a callback, not plain code statements - pass it a function instead. Also use let instead of var so that each iteration has a separate binding for i:
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
function changeText() {
var timer = 0;
for (let i = 0; i < dialog.length; i++) {
setTimeout(() => document.getElementById('h1').innerHTML = dialog[i], timer);
timer = timer + 1000;
}
}
changeText();
<div id="h1">Hello</div>

Answer 3

Check docs for setTimeout. First argument needs to be anonymous function or function. Try to wrap your first argument in setTimeout in 'function() {}' .