I am looking into the different techniques of handling arrays of edit
boxes in
Java Script. The first program below works fine. However, are there
better ways of
doing this, where the person writing the JavaScript doesn't have to
pass the index
in the "onChange" event name.
I thought that one might be able to use "this.value " or compare this as
indicated
in the second program, but it did not work.
Dr. Leff mf***@wiu.edu, ASsociate Professor of Computer Science,
Western Illinois
University, Macomb IL 61455 (309 367 0787 pager)
<HTML>
<HEAD>
<script Language="JavaS cript">
document.write( "array");
function Update(i) {
var aText = document.TF.Q[i].value;
document.TG.R[i].value = aText;
}
</script>
</HEAD>
<BODY>
<FORM name="TF">
<BR><INPUT TYPE=TEXT name="Q" onChange="Updat e(0)">
<BR><INPUT TYPE=TEXT name="Q" onChange="Updat e(1)">
<BR><INPUT TYPE=TEXT name="Q" onChange="Updat e(2)">
</FORM>
<FORM name="TG">
<INPUT TYPE=TEXT name="R" value="R1" >
<INPUT TYPE=TEXT name="R" value="R2">
<INPUT TYPE=TEXT name="R" value="R3">
</BODY></HTML>
This does NOT WORK:
<HTML>
<HEAD>
<script Language="JavaS cript">
document.write( "array 1");
function Update() {
var L = document.TF.Q.l ength;
alert("length is " + L+ " "+this.valu e);
for (i=0;i<L;i = i + 1) {
alert (" i is "+ i + "Q[i].value " + Q[i].value);
if (this.value == Q[i].value){
WhichOne=i;
}
}
alert ("whichONe is "+WhichOne) ;
var aText = document.TF.Q[WhichOne].value;
document.TG.R[WhichOne].value = aText;
}
The first alert shows an "undefined" for "this.value " I also tried
comparing
"this" to "Q[i]" directly with no good result.
I teach GUI with Java and have taught it using Microsoft API and MFC as
well
as X-Windows. These GUI all provide several ways to have one event
handler
for an array of controls and that event handler finding the control
that fired it.
