Javascript looping issue

Question

I know this is something easy that is just eluding me.

Anyway, I have a simple function that loops through a series of six images and text and hides and shows them based on which one is visible.

Issue I'm having is that when it gets to the last image, it should just start over with the first but instead it goes back to the middle image.

<script type="text/javascript">
setInterval('testAnimation()', 5 * 1000);
show = 0;
function testAnimation() {
    $("#headerImage" + show).fadeOut();
    $("#headerText" + show).fadeOut();
    if (show == 5) {
        show = 0;
    }
    else {
        show++;
    }
    $("#headerImage" + show).fadeIn();
    $("#headerText" + show).fadeIn();
}
</script>

So it should go like this:

Hide: 0 Show: 1
Hide: 1 Show: 2
Hide: 2 Show: 3
Hide: 3 Show: 4
Hide: 4 Show: 5
Hide: 5 Show: 0

But what happens after 4, 5 is 3, 4. Then it goes to 5, 0.

Any ideas as to why?

You can see the behavior here: http://www.findyourgeek.com/index-copy.php

Answer 1

Summary: Issue was a global variable name conflict for the global variable named show between two different functions (that had nothing to do with one another) in the same page.

Seems to work fine here: http://jsfiddle.net/jfriend00/pahZx/. There must be an issue with your HTML or other code. Please show your HTML and rest of the page if you want further help.

I see you've now included a link to your actual implementation.

Edit:

OK, I can now see the issue in your actual site. I can even see it happening in the Chrome debugger. It seems to only happen the first iteration through. I don't know for sure what the issue could be, but my first guess is a global variable conflict with the variable show. I would suggest these changes:

1. Change the name of your show global variable to something a lot more unique. Perhaps there is a conflict somewhere with something else using that global name (I can come up with no other explanation for why the value would be changed from 5 to 3 between invocations of the function.
2. Add var in front of the declaration of that variable.
3. Get rid of the text in the setInterval call and refer to the function directly

This is what your code would look like:

<script type="text/javascript">
setInterval(testAnimation, 5 * 1000);
var mySlideshowCntr = 0;
function testAnimation()
{
    $("#headerImage" + mySlideshowCntr).fadeOut();
    $("#headerText" + mySlideshowCntr).fadeOut();
    if (mySlideshowCntr == 5) 
        { mySlideshowCntr = 0; } 
    else 
        { mySlideshowCntr++; }
    $("#headerImage" + mySlideshowCntr).fadeIn();
    $("#headerText" + mySlideshowCntr).fadeIn();
}
</script>

I do see some code in your page that I think is setting a global named show:

// ( main ) index.php
otherSpotlightTimer = 0
function refreshOtherSpotlight()
{   
    if (!$("#login").is(":visible"))
    {
        if (otherSpotlightTimer<=3)
        {
            otherSpotlightTimer++;
            $("#otherSpotlight"+otherSpotlightTimer).hide();
            switch (otherSpotlightTimer)
            {
                case 1:show=2;break;
                case 2:show=3;break;
                case 3:show=1;break;
            }
            $("#otherSpotlight"+show).fadeIn();
        }
        if (otherSpotlightTimer > 3)
        {
            $('.qtip').each(function(){$(this).qtip("api").destroy()});
            $.post("/scripts/refreshotherspotlight.php", 
                { fromsubmit : "true" },
                function(data)
                {
                    if (data != "")
                    {
                        $("#otherSpotlight1").hide();
                        $("#otherSpotlight1").html(data);
                        $("#otherSpotlight1").fadeIn("slow");
                        //height = $("#otherSpotlight").height();
                        //$("#otherSpotlight").css('min-height', height+'px');
                    }
                }
            );
        }
        attachqTips();
    }
}

Edit2:

I can verify with a breakpoint that this other code is, indeed, setting the global variable show and that is causing a problem. If you change your global variable name to something unique, it should solve the problem. This is a classic lesson in global namespacing.