Next Button Should Switch Between 3 Images

Question

I have an image that displays on my webpage and a "Next Image" button. When the button is clicked, I want it to change the image that is displayed by calling a javascript function. I thought I had this thing figured out and was all excited until I tried it and it didn't work. Now I can't figure out WHY it doesn't work.

This is the function that gets called by the Next Image button:

function showNext()
            {
                if (document.getElementById("Apples").style.display=="inline")
                {
                    document.getElementById("Apples").style.display="none";
                    document.getElementById("Grapes").style.display="inline";
                    document.getElementById("Strawberry").style.display="none";
                }
                else if (document.getElementById("Grapes").style.display=="inline")
                {
                    document.getElementById("Apples").style.display="none";
                    document.getElementById("Grapes").style.display="none";
                    document.getElementById("Strawberry").style.display="inline";
                }
                else (document.getElementById("Strawberry").style.display=="inline")
                {
                    document.getElementById("Apples").style.display="inline";
                    document.getElementById("Grapes").style.display="none";
                    document.getElementById("Strawberry").style.display="none";
                }
            }

This is the HTML for my images:

<img id="Apples" src="/fruit/apples.jpg" height="267" width="400" alt="apples" />
        <img id="Grapes" src="/fruit/grapes.jpg" height="267" width="400" alt="grapes" />
        <img id="Strawberry" src="/fruit/strawberries.jpg" height="267" width="400" alt="grapes" />

This is my html for my Button:

<input type="submit" value="Next Image" onClick="showNext();" />

Answer 1

Assuming HTML like:

<div id="img_wrapper">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

you'd use a loop like this:

var wrapper = document.getElementById("img_wrapper");
var images = wrapper.getElementsByTagName("img");
var imgCt = images.length - 1; // account for zero-based indexing
var i1 = 1;

function showNext() {
    for (var i2 = 0; i2 < images.length; i2++) {
        images[i2].style.display = 'none';
    }

    images[i1].style.display = 'inline ';

    if (i1 < imgCt)
        i1++;
    } else {
        i1 = 0;
    }
}

http://jsfiddle.net/isherwood/FDf82

Answer 2

In an if-statement, you should use == instead of =. One equals sign is for assigning a value ;)

function showNext()
{
    if (document.getElementById("Apples").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="inline";
        document.getElementById("Strawberry").style.display="none";
    }
    else if (document.getElementById("Grapes").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="inline";
    }
    else
    {
        document.getElementById("Apples").style.display="inline";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="none";
    }
}

For more information regarding comparisons, you can check this out.

Overlooked the last else call, should work now. You can't specify a condition in an else statement, use else if for that :).

Answer 3

It may be because you don't have the display property defined off the start, so none of those if conditions are met. What if you change your javascript to this, so it will set the display property on the first one the first time through:

function showNext()
{
    if (document.getElementById("Apples").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="inline";
        document.getElementById("Strawberry").style.display="none";
    }
    else if (document.getElementById("Grapes").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="inline";
    }
    else
    {
        document.getElementById("Apples").style.display="inline";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="none";
    }
}