I have this school assignment that I've been working on and am totally stumped as to why it's doing what it's doing. Basically it's a left selection list, 2 middle buttons, and a right selection list. The purpose is to move options between lists. My problem is as follows: a selection is made on left list, the move to right list button is clicked, an option is added to the right list named "undefined" and the selection on the left list disappears. I don't want anyone to do my homework for me, but tips and hints are greatly appreciated.
Here's my code:
<script type="text/javascript">
/* <![CDATA[ */
function moveRight() {
var leftCurText = document.forms[0].leftSide.selectedIndex.text;
var leftCurValue = document.forms[0].leftSide.selectedIndex.value;
var leftCurName = document.forms[0].leftSide.selectedIndex;
if (leftCurName != -1) {
var listName = new Option();
listName.text = leftCurText;
listName.value = leftCurValue;
nextItem = document.forms[0].rightSide.length;
document.forms[0].rightSide.options[nextItem] = listName;
document.forms[0].leftSide.options[leftCurName] = null;
} else if (document.forms[0].leftSide.length <= 0) {
window.alert("There are no more options in the left list")
}
else
window.alert("No option is selected on the left side");
}
function moveLeft() {
var rightCurText = document.forms[0].rightSide.selectedIndex.text;
var rightCurValue = document.forms[0].rightSide.selectedIndex.value;
var rightCurName = document.forms[0].rightSide.selectedIndex;
if (rightCurName != -1) {
var listName = new Option();
listName.text = rightCurText;
listName.value = rightCurValue;
nextItem = document.forms[0].leftSide.length;
document.forms[0].leftSide.options[nextItem] = listName;
document.forms[0].rightSide.options[rightCurName] = null;
} else if (document.forms[0].rightSide.length <= 0) {
alert("There are no more options on the right list")
} else
window.alert("No option is selected on the right side");
}
/* ]]>*/
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="Stylesheet" type="text/css" />
</head>
<body>
<h2>This page will switch items between lists</h2>
<div align="center">
<form action="">
<table border="3">
<tr>
<th>Left List</th>
<th>Click</th>
<th>Right List</th>
</tr>
<tr>
<td>
<select name="leftSide" size="6">
<option value="stephanie">Stephanie</option>
<option value="beatriz">Beatriz</option>
<option value="carol">Carol</option>
</select>
</td>
<td>
<input type="button" onclick="moveLeft()" name="leftButton" value="<<" /> <br />
<input type="button" onclick="moveRight()" name="rightButton" value=">>" />
</td>
<td>
<select name="rightSide" size="6">
<option value="evan">Evan</option>
<option value="david">David</option>
<option value="mark">Mark</option>
</select>
</td>
</tr>
</table>
</form>
</div>
</body>