How to get all messages from an array with setInterval (Javascript) [solved]

Question

I want to get all the messages one by one every 2 seconds and repeat again and again, but only the last message is visible.
I tried a lot, but didn't get its logic.
Please tell me how to fix it.

Trial code:
https://code.sololearn.com/Wsa9AMptTJSX/?ref=app

Answer 1

Use it.
setInterval(function(){
for (let i = 0; i < msgs.length; i++){
head.innerHTML += msgs[i]+"<br>";
}
}, 2000)

Answer 2

Mirielle[ INACTIVE ] But mam why you using hard method...it can be done easily...

Answer 3

Check it 💕 Prasant 💕 ✳️
https://code.sololearn.com/WrR3A91a6tZx/?ref=app

Answer 4

https://code.sololearn.com/Wkpd8MpGRv7W/?ref=app
Hope you need something like this
i done all things in one line just look at line 14 if you don't understand then mention me

Answer 5

Your current code in english:
Every 2 soconds call a function that iterates the array and assign each of its values to the innerHTML of the #head element.
The iteration occurs inmediately, it just overrides the innerHTML over and over until the last element(the output) is reached.

What you need in english:
Every 2 seconds call a function that, somehow, keeps track of the index of the current element to be displayed, and prints it. Then it increments the index so that the function prints the next element when it's called again.

Code:
var i=0
setInterval(function(){
head.innerHTML = msgs[i];
i++
}, 2000)

SAYED🇧🇩🇧🇩 I think using a loop that way is confusing.

Answer 6

SAYED🇧🇩🇧🇩
No, I didn't mean that.
I want to change the inner text of that h1 tag with all the messages from that array one by one repeatedly after every 2 seconds.
Not to add new texts

Answer 7

Mirielle[ INACTIVE ]
You used Date() for it ! 😳

what is the full form of RAF ?

Thank you so much 😊

Answer 8

I won't solve your issue as it's already been solved but I wanna say DO NOT USE SETINTERVAL. That's the worst thing you could do and different browsers have different down-sides for setInterval. Rather, use setTimeout. It's much more efficient and convenient.

Answer 9

Cryptic Art
Is the setInterval not supported in some browsers ?

Answer 10

💕 Prasant 💕 ✳️ take a look at https://www.thecodeship.com/web-development/alternative-to-javascript-evil-setinterval/ you don't need to apply the same interval function there but just get an idea of why it's not a great thing to use setInterval.

Answer 11

💕 Prasant 💕 ✳️ I forgot abt your question. I believe most browsers or, at least, most modern browsers support it since it's become part of JS. However refer to the link in my previous comment to see why it's a better idea to stop using it

Answer 12

💕 Prasant 💕 ✳️
try this:

setInterval(function(){
head.innerHTML = msgs.shift();
}
}, 2000)

Answer 13

Thank you so much all for helping me 😊

Answer 14

💕 Prasant 💕 ✳️
if you want to restart from the beginning it will be like this:

setInterval(function(){
head.innerHTML = msgs.shift();
msgs.push(head.innerHTML);
}, 2000);

Answer 15

Jiya 💙💙
Thank you ☺️
I understood

Answer 16

o.gak
Thank you sir
I didn't know the use of .shift() method

But when I uaed it, it shows undefined when the iteration ends instead of repeating from the beginning.

Answer 17

o.gak thank you 😊