Button back and next

[gncreditcards]

HI
I'm trying that the buttons next and back, run in the script.

If you select the option Test1 the script work but if you select the option Test2 and test2 don't work

What I can do?
thanks

<style type="text/css">
#sddm { margin: 0; padding: 0; z-index: 30; position:absolute;}

#sddm li { margin: 0; padding: 0; list-style: none; float: left;}

#sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; }
</style>
<script language="JavaScript" type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
} function mclose(){
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
} function mclosetime(){
closetimer = window.setTimeout(mclose, timeout);
} function mcancelclosetime() {
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
<script type="text/javascript">
<!--
function switchDiv(div_id)
{
var style_sheet = getStyleObject(div_id);
if (style_sheet)
{
hideAll();
changeObjectVisibility(div_id,"visible");
} else {
alert("sorry, this only works in browsers that do Dynamic HTML");
}
}
function hideAll()
{
changeObjectVisibility("ma1ob1","hidden");
changeObjectVisibility("ma1ob2","hidden");
}
function getStyleObject(div_id) {
if(document.getElementById && document.getElementById(div_id)) {
return document.getElementById(div_id).style;
} else if (document.all && document.all(div_id)) {
return document.all(div_id).style;
} else if (document.layers && document.layers[div_id]) {
return document.layers[div_id];
} else {
return false;
}
}
function changeObjectVisibility(div_id, newVisibility) {
var styleObject = getStyleObject(div_id);
if(styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
return false;
}
}
// -->
</script>
<ul id="sddm">
<li><a href="#">Contact</a></li>
<li><a href="#">HELP</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">TEST</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#" onclick="switchDiv('ma1ob1')"/>test1</a>
<a href="#" onclick="switchDiv('ma1ob2')"/>test2</a>
<a href="#" onclick="switchDiv('ma1ob3')"/>test2</a>
</div></li></ul>
<div style="clear:both"></div>
<script language="JavaScript" type="text/javascript">
/* THIS IS THE SCRIPT I WANT TO FIX THANKS */
function changeImage()
{
var list = document.getElementById('s2');
//document.mainimage.src = list.options[list.selectedIndex].value;
}

function prevImage()
{
var list = document.getElementById('s2');
if(list.selectedIndex == 0)
{
list.selectedIndex = list.options.length-1;
} else {
list.selectedIndex--;
} changeImage();
}

function nextImage()
{
var list = document.getElementById('s2');
if(list.selectedIndex == list.options.length-1)
{
list.selectedIndex = 0;
} else {
list.selectedIndex++;
} changeImage();
}
</script><br><table summary="" border=1 align="CENTER">
<tr><td align="right"><input type="button" value="<- Back" onClick="javascriptrevImage()">
<input type="button" value="Next->" onClick="javascript:nextImage()"></td></tr>
</table>
<BR><BR>
<div id="ma1ob1" style="position:absolute;visibility:hidden;top:50p x;left:10px;border-width:thick thick thick thick; border-color:green; ">
<form name="form1" ><a>
<select name="select763" id="s2" size="50" WIDTH="120" STYLE="width: 120px" onChange="javascript:changeImage()">
<option value="none" selected="selected">Select</option>
<option value="1">GOOD JOB</option>
<option value="2">EXCELENT</option>
<option value="3">NICE</option>
<option value="4">WOW</option>
</select></a></form></div>
<div id="ma1ob2" style="position:absolute;visibility:hidden;top:50p x;left:10px;border-width:thick thick thick thick; border-color:red; ">
<form name="form2"><a>
<select name="select763" id="s2"size="50" WIDTH="120" STYLE="width: 120px" onChange="javascript:changeImage()">
<option value="none" selected="selected">Select </option>
<option value="1">THANKS</option>
<option value="2">CONGRATULATION</option>
</select></a>
</form></div>
<div id="ma1ob3" style="position:absolute;visibility:hidden;top:50p x;left:10px;border-width:thick thick thick thick; border-color:green; ">
<form name="form1" ><a>
<select name="select763" id="s2" size="50" WIDTH="120" STYLE="width: 120px" onChange="javascript:changeImage()">
<option value="none" selected="selected">Select</option>
<option value="1">NOT GOOD</option>
<option value="2">BETTER LUCKY</option>
<option value="3">NEXT TIEM</option>
<option value="4">SORRY</option>
</select></a></form></div>