How to make javascript code loop to repeat text?

Question

I found this code online but it doesn't seem to start from the beginning when the messages run out. It just stops. How could I fix this?

<script>
  $(document).ready(function() {
    function nextMsg() {
      if (messages.length == 0 ) {
      } else {
        $('#message').html(messages.pop()).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg);
    }
};

    var messages = [
      "For the love of music.",
      "We want you to succeed, that's why we're here.",
      "You make the music, we'll do the rest.",
      "Get your music out, EVERYWHERE.",
      "We are here to change the game."
    ].reverse();

    $('#message').hide();
      nextMsg();
    });
</script>

I expect it to start from the top of var = messages again when there is no more strings to read

Answer 1

You can use the modulus operator and the length of the array to cause the cycling of content.

The reason why your code wasn't cycling is it was using pop() which removes content from the array - so one cycle through and all content was removed - doing it this way allows a counter to increment infinitely, but always return an index based on the length of hte array (using the modulus operator).

This way the array is not mutated and the quotes will cuycle through endlessly.

 $(document).ready(function() { var messages = [ "For the love of music.", "We want you to succeed, that's why we're here.", "You make the music, we'll do the rest.", "Get your music out, EVERYWHERE.", "We are here to change the game." ].reverse(); var counter = 0; var len = messages.length; function nextMsg() { var message = messages[counter % len]; counter++; $('#message').html(message).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg); }; $('#message').hide(); nextMsg(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id="message"></p> 

Answer 2

You missing the logic to go to the begining of the array again

 $(document).ready(function() { var count = 0 function nextMsg() { if (messages.length == 0 ) { } else { count = count < messages.length ? count + 1 : 0 $('#message').html(messages[count]).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg); } }; var messages = [ "For the love of music.", "We want you to succeed, that's why we're here.", "You make the music, we'll do the rest.", "Get your music out, EVERYWHERE.", "We are here to change the game." ].reverse(); $('#message').hide(); nextMsg(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id="message"></p> 

Answer 3

Basic Logic;

It uses jquery, don't forget to import jquery into your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

And there, there is a code

$("#message");

As a parameter to display

because the parameter is * ID *, so you only need to create HTML elements by using ID as the parameter.

<div id="message"></div>

if like this, the code indicates the class.

$(".message")

then the HTML element:

<div class="message"></div>

Answer 4

You have missed to add html content add this to your code.

and I added a snippet to repeat the datas

<div id="message"></div>

 $(document).ready(function() { var i = 0; function nextMsg() { data = i % messages.length; $('#message').html(messages[data]).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg); i++; }; var messages = [ "For the love of music.", "We want you to succeed, that's why we're here.", "You make the music, we'll do the rest.", "Get your music out, EVERYWHERE.", "We are here to change the game." ].reverse(); $('#message').hide(); nextMsg(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="message"></div>