asked on

Javascript Array iteration and removal

I want to create a Javascript Array using a form select box that the user would click and create said array.

The code below will show a functional selectbox which adds selections into a text area.

I cannot figure out how to iterate the array so that everytime the select box changes, an increasing value (0,1,2,3,4,5) gets configured for the Array's Identifier.

does concat() help with this?

Later ON, I'll want to allow the user to remove something from the array.

does slice() work with this?

Here is my code so far.

<Script>
function writeval()
{
var val;
var ct;
var valary = new Array();
val=document.grab.Choice.value;
document.grab.textarea1.value+=val + " ";
valary[0] = val;
ct = valary[0];
}
</script>

<table>
<form name=grab method=post action=next.php>
<Tr><Td valign=top>
<Select NAME=Choice onChange= "writeval();">
<OPTION VALUE = "Football">Football</OPTION>
<OPTION VALUE = "Baseball">Baseball</OPTION>
<OPTION VALUE = "Hockey">Hockey</OPTION>
</Select>
</td><td>
<textarea readonly name=textarea1 rows=5 cols=50></textarea></td></tr>

</form>
</table>

ASKER CERTIFIED SOLUTION

callrs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rama_krishna580

Hi,

look at this...
http://richardbowles.tripod.com/javascript/section5/lesson5.htm
http://www.c-point.com/javascript_tutorial/array.htm
http://www.webreference.com/programming/java_core/2.html
http://www.irt.org/script/1411.htm

R.K

HonorGod

callrs, why are you pointing people to a site that requires registration? Please put the answer here.

You are having problems because:
- every time you invoke writeval(), a new valary is created.

------------------------------------
<html>
<head>
<title> Grab </title>
<script>
var valary = [];
function writeval() {
var sel = document.getElementById( 'pick' );
if ( sel.selectedIndex ) {
var opts = sel.getElementsByTagName( 'option' );
var val = opts[ sel.selectedIndex ].value;
valary[ valary.length ] = val;
document.getElementById( 'out' ).value = valary.toString();
}
}
</script>
</head>
<body>

<form name='grab' method='post' action=''>
<table>
<tr>
<td valign=top>
<select id='pick' name='Choice' onChange='writeval();'>
<option>Please make a selection</option>
<option>Football</option>
<option>Baseball</option>
<option>Hockey</option>
</select>
</td>
<td>
<textarea id='out' readonly name='textarea1' rows='5' cols='50'></textarea>
</td>
</tr>
</table>
</form>

</body>
</html>

callrs

Thanks for the A.

No registration needed. It's a super-fast file sharing site, and allows an instant demo vs. copy/paste/save/open.

Once satisfied, then final version can be pasted:

<script type="text/javascript">
var valary = new Array();
var I=0;
function writeval(obj){
var frm=obj.form;
var val;
var ct;
val=frm.Choice.value;
frm.textarea1.value+=I+" "+val + " ";
valary[I++] = val;
ct = val;
}
</script>

<table>
<form name=grab method=post action=next.php>
<Tr><Td valign=top>
<Select NAME=Choice onChange= "writeval(this);">
<OPTION VALUE = "Football">Football</OPTION>
<OPTION VALUE = "Baseball">Baseball</OPTION>
<OPTION VALUE = "Hockey">Hockey</OPTION>
</Select>
</td><td>
<textarea readonly name=textarea1 rows=5 cols=50></textarea></td></tr>

</form>
</table>