Array indexing question

[thesoundsmith]

I have a page at http://www.thesoundsmith.com/hmd2.htm that displays a series of scans, and if there is a sound involved, plays it. If you select a page from the list on the right, it loads the page and plays the sound, exactly as i wih. If you click the Prev or Next buttons, the page changes, but the sound is not called (as is the original design). There is an array, myArr, that holds the .gif filenames myArr[0] to [19] I want to add that sound function to the two buttons, so I added a second dimension to the array (myArr[19,1] and incorporated the corresponding wav file addresses.. I am not yet attemptong to link the two functions; as step one I simply want the page to function exactly as it did with only one array dimension. But despite the page variable being accepted, while initial page load displays page 1 (of 20) any change from either the menu or the buttons loads the last page. I don't see where I am losing the connection. "hiddenValue" from the right menu returns the proper value, but it is not transmitted to the array selection. The original code is:

    <script language="javascript" type="text/javascript">    // create an array to store the names of images    var myArr = new Array();    myArr[0] = 'pix/hp1.gif';    myArr[1] = 'pix/hp2.gif';    myArr[2] = 'pix/hp3.gif';    myArr[3] = 'pix/hp4.gif';    myArr[4] = 'pix/hp5.gif';    myArr[5] = 'pix/hp6.gif';    myArr[6] = 'pix/hp7.gif';    myArr[7] = 'pix/hp8.gif';    myArr[8] = 'pix/hp9.gif';    myArr[9] = 'pix/hp10.gif';    myArr[10] = 'pix/hp11.gif';    myArr[11] = 'pix/hp12.gif';    myArr[12] = 'pix/hp13.gif';    myArr[13] = 'pix/hp14.gif';    myArr[14] = 'pix/hp15.gif';    myArr[15] = 'pix/hp16.gif';    myArr[16] = 'pix/hp17.gif';    myArr[17] = 'pix/hp18.gif';    myArr[18] = 'pix/hp19.gif';    myArr[19] = 'pix/hp20.gif';    // A global variable    var hiddenArrayIndex = 0;    // this function will change the image to the previous image    // stored in the array    function movePrevious(){	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not 0 then decrement the value by 1 and	    // store it back into the hidden field.	    if(hiddenArrayIndex != 0) {		    document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) - 1;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";    }    // this function will change the image to the next image    // stored in the array    function moveNext(){	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not equal to the upper index of the array	    // then increment the value by 1 and store it back into the hidden field	    if(hiddenArrayIndex != (myArr.length - 1)) {		    document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) + 1;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";   //  alert(myArr[hiddenArrayIndex]);    }    function showThis(indexNum){	    var newIndex = indexNum;	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not equal to the upper index of the array	    // then increment the value by 1 and store it back into the hidden field	    if(hiddenArrayIndex != newIndex) {		    document.getElementById('hiddenValue').value = newIndex;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";   //  alert(myArr[hiddenArrayIndex]);    }    </script>

The two-dimension version is at http:// http://www.thesoundsmith.com/hmd2ALT.htm and the code is:

    <script language="javascript" type="text/javascript">    // create an array to store the names of images    var myArr = new Array();    myArr[0,0] = 'pix/hp1.gif';    myArr[0,1] = '';    myArr[1,0] = 'pix/hp2.gif';    myArr[1,1] = '';    myArr[1,1] = 'pix/hp2.gif';    myArr[2,0] = 'pix/hp3.gif';    myArr[2,1] = '';    myArr[3,0] = 'pix/hp4.gif';    myArr[3,1] = '';    myArr[4,0] = 'pix/hp5.gif';    myArr[4,1] = '';    myArr[5,0] = 'pix/hp6.gif';    myArr[5,1] = 'wavs/b3/b3__pg6.mp3';    myArr[6,0] = 'pix/hp7.gif';    myArr[6,1] = 'wavs/b3/b3__pg7.mp3';    myArr[7,0] = 'pix/hp8.gif';    myArr[7,1] = 'wavs/b3/b3__pg8.mp3';    myArr[8,0] = 'pix/hp9.gif';    myArr[8,1] = '';    myArr[9,0] = 'pix/hp10.gif';    myArr[9,1] = 'wavs/b3/b3__pg10.mp3';    myArr[10,0] = 'pix/hp11.gif';    myArr[10,1] = 'wavs/b3/b3__pg11.mp3';    myArr[11,0] = 'pix/hp12.gif';    myArr[11,1] = 'wavs/b3/b3__pg12.mp3';    myArr[12,0] = 'pix/hp13.gif';    myArr[12,1] = '';    myArr[13,0] = 'pix/hp14.gif';    myArr[13,1] = 'wavs/b3/b3__pg14.mp3';    myArr[14,0] = 'pix/hp15.gif';    myArr[14,1] = 'wavs/b3/b3__pg15.mp3';    myArr[15,0] = 'pix/hp16.gif';    myArr[15,1] = 'wavs/b3/b3__pg16.mp3';    myArr[16,0] = 'pix/hp17.gif';    myArr[16,1] = '';    myArr[17,0] = 'pix/hp18.gif';    myArr[17,1] = 'wavs/b3/b3__pg18.mp3';    myArr[18,0] = 'pix/hp19.gif';    myArr[18,1] = 'wavs/b3/b3__pg19.mp3';    myArr[19,0] = 'pix/hp20.gif';    myArr[19,1] = 'wavs/b3/b3__pg20.mp3';    // A global variable    var hiddenArrayIndex = 0;    // this function will change the image to the previous image    // stored in the array    function movePrevious(){	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not 0 then decrement the value by 1 and	    // store it back into the hidden field.	    if(hiddenArrayIndex != 0) {		    document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) - 1;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex,0] + ")";    }    // this function will change the image to the next image    // stored in the array    function moveNext(){	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not equal to the upper index of the array	    // then increment the value by 1 and store it back into the hidden field	    if(hiddenArrayIndex != (myArr.length - 1)) {		    document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) + 1;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex,0] + ")";   //  alert(myArr[hiddenArrayIndex]);    }    function showThis(indexNum){	    var newIndex = indexNum;	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not equal to the upper index of the array	    // then increment the value by 1 and store it back into the hidden field	    if(hiddenArrayIndex != newIndex) {		    document.getElementById('hiddenValue').value = newIndex;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex,0] + ")";   //  alert(myArr[hiddenArrayIndex]);    }    </script>

What am i missing? Must be something simple, but I don't see it. Thanks.

[jeffman]

myArr[0] = new Array();myArr[0][0] = 'pix/hp1.gif';myArr[0][1] = '';

Edited April 27, 2013 by Deirdre's Dad

[thesoundsmith]

Thanks.