img や form や inputのタグ要素は、
name属性で名前を付けることにより、
document.名前.〜の表現が使えました。
(他の要素で、このような表現はできません。)
ですが、name属性に同じ名前を付けると、このような表現ではなく、
その名前を配列名として使う表現に変わります。
下の Fの同じ名前を付けたform要素を ２つ用意した例で、説明します。
右下の５つのテキストフィールドは、２つformで構成されてそのソースは右下のコードになっています。
２つform要素は 同じ名前になっており、
document.F[0]〜
と
document.F[1]〜
の表現でアクセスできるようになります。
そして各form要素の中で、Aの名前の要素を３つと
Bの名前の要素を２つ作っています。
これで最初のform要素の中で、２番目のinputタグ要素のvalueを"123"に変更するは
次のように表現できます。
document.F[0].A[1].value="123";
これを実行できます。→
"bb"に変更する例も示します。
document.F[0].A[1].value="bb";
これを実行できます。→
<form name="F"> <input type="text" value="aa" size="3" name="A"> <input type="text" value="bb" size="3" name="A"> <input type="text" value="cc" size="3" name="A"><br> </form> <form name="F"> <input type="text" value="wx" size="3" name="B"> <input type="text" value="yz" size="3" name="B"> </form> |
上記例では示しませんでしたがimgタグも、name属性に同じ名前を付けると その名前が配列名として使えます。
以下では、それを利用た具体的な例の練習問題です。
配列を使う利点は何でしょうか？それば番号のインデックスで要素を特定できることです。
以下は２つのテキストフィールドの値のインデックスで指し示す画像を交換する例です。
なお ■■■■では、上記説明の配列を使った表現にしてください。
また、余計なコメントは外してください。