javascript array for loop show the last item in the array again and again

Question

I have this code, what am I trying to do is to make "fade-In fade-Out" effect off the text, while every time it will do fadeIn fadeOut its will replace the text (shown on p id="string") with the next array value but its show the last value every time (Name 3 - Message 3).

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>

Thanks you.

user447356 · Accepted Answer · 2013-10-14 15:01:59Z

1

You don't need any loop to achieve what you want:

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;
}

Live test case.

Details: store the current index in a global variable then use that index and increment every execution of the function. Also note you need to call the function initially otherwise you'll wait 6 seconds before the first item appears.

answered Oct 14, 2013 at 15:01

user447356

Sign up to request clarification or add additional context in comments.

2 Comments

mplungjan Over a year ago

I love the index = (index + 1) % words.length

user447356 Over a year ago

@mplungjan yeah, there are fancier ways but that's my prefered - elegant yet still readable enough. :)

Jonathan · Accepted Answer · 2013-10-14 15:04:33Z

0

Your code will display every time last item because you are doing the loop inside the timer.

You should replace your code with this:

$(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);
});

Here the fiddle: http://jsfiddle.net/zGSYz/

answered Oct 14, 2013 at 15:04

Jonathan

7738 silver badges22 bronze badges

Collectives™ on Stack Overflow

javascript array for loop show the last item in the array again and again

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related