Adjusting content within a div using a loop with a pause interval

Question

Adjusting content within a div using a loop with a pause interval

I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet:

    <div class="mytext">first</div>

My goal is to dynamically change this text from 'first' to 'second' after 5 seconds, then to 'third' after another 5 seconds, and finally return to 'first'. Can you offer any assistance or guidance in achieving this functionality?

jquery html css

Answer 1

Answer №1

If you wish to cycle through an array of text or add more elements for display, you can utilize the following code snippet. Make sure to use setInterval to trigger the function every 5 seconds

var text = ['first', 'second', 'third'];
function rotateText(){
  var myText = document.getElementById('mytext');
  var currentIndex = text.indexOf(myText.innerHTML);
  myText.innerHTML = text[(currentIndex+1)%text.length];
}

setInterval(rotateText,5000);

<div id="mytext">first</div>

Answer 2

If you wish to cycle through an array of text or add more elements for display, you can utilize the following code snippet. Make sure to use setInterval to trigger the function every 5 seconds

var text = ['first', 'second', 'third'];
function rotateText(){
  var myText = document.getElementById('mytext');
  var currentIndex = text.indexOf(myText.innerHTML);
  myText.innerHTML = text[(currentIndex+1)%text.length];
}

setInterval(rotateText,5000);

<div id="mytext">first</div>

Answer 3

Answer №2

To activate a method using setInterval(), simply create the method and then invoke it within the body.

<head>
<script>
    var messages = ["message one", "message two", "message three"];

    function displayMessage(currentIndex) 
    {
        if( currentIndex == messages.length ) currentIndex = 0;

        document.getElementById("text").innerHTML = messages[currentIndex];            

        setInterval(function(){ displayMessage(currentIndex+1) }, 5000);
    }
</script>
</head>

<body onload="displayMessage(0)">
    <div id="text"></div>
</body>

Answer 4

To activate a method using setInterval(), simply create the method and then invoke it within the body.

<head>
<script>
    var messages = ["message one", "message two", "message three"];

    function displayMessage(currentIndex) 
    {
        if( currentIndex == messages.length ) currentIndex = 0;

        document.getElementById("text").innerHTML = messages[currentIndex];            

        setInterval(function(){ displayMessage(currentIndex+1) }, 5000);
    }
</script>
</head>

<body onload="displayMessage(0)">
    <div id="text"></div>
</body>

Adjusting content within a div using a loop with a pause interval

Answer №1

Answer №2

Similar questions

Accessing and manipulating web elements using either XPath or CSS selectors

Creating stylistic layouts for text using CSS

Mastering the Cache-Manifest file configuration for optimal performance

Access the document on the desktop and open it in a new popup window

What could be causing the message "Please right click to enable Adobe Flash Player" to appear on my site?

Discovering the data content received from a server using jQuery ajax techniques

Ways to hide the value from being shown

The media query for mobile is not functioning properly

How can I adjust the size and alignment of each line within a single cell in an HTML table?

Spooky results displayed on website from NightmareJS

Below are the steps to handle incorrect input after receiving only one letter:

Modify the stroke attribute of the <path> element using CSS

"Incorporating a datepicker into input fields that are added dynamically

The slider feature is malfunctioning on Internet Explorer version 8

Gathering video links from various sections of a site

How can we best understand the concept of custom directives using the link method?

Step-by-step guide on generating a fluid list with Express and HTML

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

Show the attribute of an element in a pop-up window

Changing Table Cell Color with Bootstrap Based on Value