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属性に同じ名前を付けると その名前が配列名として使えます。
以下では、それを利用た具体的な例の練習問題です。
配列を使う利点は何でしょうか？それば番号のインデックスで要素を特定できることです。
以下は２つのテキストフィールドの値のインデックスで指し示す画像を交換する例です。
←このボタンをクリックして表示するページと、
同じように見えるHTMLを、以下の■■■■を変更して作成してください。
なお、小文字を使っても影響がない範囲で小文字を使ってください。
なお ■■■■では、上記説明の配列を使った表現にしてください。
また、余計なコメントは外してください。
←上記で編集した内容を、ブラウザで確認するボタンです
上のボタンで確認した後、正しいと思ったら、下の評価ボタンをクリックください。
←目標と同じ結果が得られるように修正してからクリックください。（下の枠に出たメッセージの⇒をクリックすると、違うと判断される近辺の行が反転します）
←作り方はいろいろですが、わからない場合や正解しない場合は、答えを見て出題されるパターンを学習し、再度チャレンジしてください。