Loop through the JavaScript array and continuously display the last item in the array. Repeat this process indefinitely

Question

Loop through the JavaScript array and continuously display the last item in the array. Repeat this process indefinitely

I am working on a code to create a "fade-In fade-Out" effect for text. However, I'm facing an issue where the text displayed is always the last value in the array instead of changing to the next one each time it fades in and out.

Here is the HTML code below:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    var str = $("#string").text().split(' + ');
    setInterval(function(){
        s++;
        for (var s = 0; s < str.length; s++) {
            var string = str[s];
            $("#string").html(string);
            $("#string").fadeIn(500);
            $("#string").fadeOut(3000);
        }   
    }, 6000);
});
</script>
</head>
<body>
<p id="string" style="display:none;">Name 1 - Message 1 + Name 2 - Message 2 + Name 3 - Message 3</p>
</body>
</html>

Thank you!

javascript html css

Answer 1

Answer №1

Instead of using a loop, you can achieve your desired outcome in a simpler way:

var placeholder = $("#string");
var words = placeholder.text().split(' + ');
var index = 0;
window.setInterval(ShowCurrentWord, 6000);
ShowCurrentWord();
function ShowCurrentWord() {
    var currentWord = words[index];
    placeholder.html(currentWord).fadeIn(500).fadeOut(3000);
    index = (index + 1) % words.length;
}

Check out the live test case here.

Here's a tip: keep track of the current index using a global variable and increment it in each function execution. Don't forget to call the function initially to avoid waiting for 6 seconds before the first item appears.

Answer 2

Instead of using a loop, you can achieve your desired outcome in a simpler way:

var placeholder = $("#string");
var words = placeholder.text().split(' + ');
var index = 0;
window.setInterval(ShowCurrentWord, 6000);
ShowCurrentWord();
function ShowCurrentWord() {
    var currentWord = words[index];
    placeholder.html(currentWord).fadeIn(500).fadeOut(3000);
    index = (index + 1) % words.length;
}

Check out the live test case here.

Here's a tip: keep track of the current index using a global variable and increment it in each function execution. Don't forget to call the function initially to avoid waiting for 6 seconds before the first item appears.

Answer 3

Answer №2

Your current code is causing the last item to be displayed every time because the loop is inside the timer.

To fix this issue, you should replace your code with the following:

$(document).ready(function(){

    var str = $("#string").text().split(' + ');
    var s = 0;
    var arrayLength = str.length;

    setInterval(function(){

        if(s>(arrayLength - 1)){
            s = 0;
        }   
        var string = str[s];
        $("#string").html(string);
        $("#string").fadeIn(500);
        $("#string").fadeOut(500);

        s++;

    }, 1000);
});

You can view the updated code on JSFiddle here: http://jsfiddle.net/zGSYz/

Answer 4

Your current code is causing the last item to be displayed every time because the loop is inside the timer.

To fix this issue, you should replace your code with the following:

$(document).ready(function(){

    var str = $("#string").text().split(' + ');
    var s = 0;
    var arrayLength = str.length;

    setInterval(function(){

        if(s>(arrayLength - 1)){
            s = 0;
        }   
        var string = str[s];
        $("#string").html(string);
        $("#string").fadeIn(500);
        $("#string").fadeOut(500);

        s++;

    }, 1000);
});

You can view the updated code on JSFiddle here: http://jsfiddle.net/zGSYz/

Loop through the JavaScript array and continuously display the last item in the array. Repeat this process indefinitely

Answer №1

Answer №2

Similar questions

Updating a data table using POST values in ASP.NET: A step-by-step guide

Extracting information from a string with JSON in Javascript

Encountering a MODULE NOT FOUND error when using express.js

Having trouble getting Google Tag Manager (GTM) to function properly on SharePoint?

Guide to locating and substituting two integer values within a string using JavaScript

Delete the span element if the password requirements are satisfied

Is there a way to continually update a specific portion of a webpage using AJAX without manual intervention?

Is there a way to organize items in an array alphabetically according to a predetermined key value?

Struggling to adjust the dimensions of a React Barcode to the specified width and height?

What is the best way to retrieve the 'date,time' column from a MySQL database and use it as input for the google chart DateRangeFilter?

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

Preserving the button's state when clicked

Tips on separating a function into two separate files in Node.js

Using PHP, create a redirect page that utilizes AJAX and jQuery for a seamless user experience

Adjusting table column widths in Bootstrap 4

Obtaining API/JSON Data to Implement in a NextJS Application

Create a new one-dimensional array by stacking the columns of a matrix

Exploring the process of using querySelector() to locate specific class and div IDs in JavaScript code

Arranging alphanumeric values in JavaScript or jQuery

Turn off any :hover CSS effects that are present when viewing on a separate media