JavaScript array to display different pictures on click not functioning as expected

Question

I am currently making it so that when you click a number, the picture above it will change, eventually the pictures will be made to update in real time from another input (if anyone has any ideas that would be great even if it is another topic), and the idea is you can go through and click one of the pictures to get a better look.

I have got the outgoing to work fine, but I am struggling to get the incoming working as well.

They were both working, I am guessing I have made it have a spazz somewhere.

Anyone help please?

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(objName)
{
    //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
    var obj = document.getElementById(objName);

    //An array that hold the IDs of images that we mentioned in their DIV blocks
    var objId = new Array();

    //Storing the image IDs into the array starts here
    objId[0] = "limage1";
    objId[1] = "limage2";
    objId[2] = "limage3";
    objId[3] = "limage4";
    objId[4] = "limage5";
    //Storing the image IDs into the array ends here

    //A counter variable going to use for iteration
    var i;

    //A variable that can hold all the other object references other than the object which is going to be visible
    var tempObj;

    //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
    //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
    //of the if statement within this loop.
    for(i=0;i<objId.length;i++)
    {
        if(objName == objId[i])
        {
            obj.style.display = "block";
        }
        else
        {
            tempObj = document.getElementById(objId[i]);
            tempObj.style.display = "none"; 
        }
    }
    return; 
}
</script>

<script type="text/javascript">
function changeIt(objName)
{
    //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
    var obj = document.getElementById(objName);

    //An array that hold the IDs of images that we mentioned in their DIV blocks
    var objId = new Array();

    //Storing the image IDs into the array starts here
    objId[0] = "rimage1";
    objId[1] = "rimage2";
    objId[2] = "rimage3";
    objId[3] = "rimage4";
    objId[4] = "rimage5";
    //Storing the image IDs into the array ends here

    //A counter variable going to use for iteration
    var j;

    //A variable that can hold all the other object references other than the object which is going to be visible
    var tempObj;

    //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
    //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
    //of the if statement within this loop.
    for(j=0;j<objId.length;j++)
    {
        if(objName == objId[j])
        {
            obj.style.display = "block";
        }
        else
        {
            tempObj = document.getElementById(objId[j]);
            tempObj.style.display = "none"; 
        }
    }
    return; 
}
</script>

http://jsfiddle.net/9mT8d/1/

Answer 1

You are calling and define the same function two times.

Try to change the name.

http://jsfiddle.net/9mT8d/6/

for example

   function changeItOut