JavaScriptで変数（しいてはfor文）を用いて、第ｘ問のテキストフィールドが空白ですよみたいな警告を出したいのですが・・・

質問

for文の使い方とテキストフィールドが空白だと警告を表示させる方法は分かっているのですが、変数の扱いがいまいちよくわかりません。とりあえず次のソースを見てください。

　　i=1;
if(document.form1."No" + i + "" .value == ""){
window.alert("第" + i + "問が未入力です"); // 入力漏れがあれば警告ダイアログを表示
return false; // 送信を中止

[省略]
<FORM METHOD="POST" ACTION="form.cgi" name="form1" onsubmit="return disp()">
[省略]
<a href="sample.wav">第1問</a>　<INPUT TYPE="text" NAME="No1">

　要は、第１問のsample.wavを聞いて、テキストに答えを入力してもらい、空白だと警告を出し、送信を中止するというものです。 ですが、変数iがif文に適用されず、困っています（document.form1.No1と入力すれば第１問が未入力ですになりますが・・・）。問題数がかなりの数になる予定なのでfor文が使えると非常にありがたいのですが、なんにしても変数が使えないと話になりません。ですので解決方法を教えてください。

回答No.2

yambejp · ベストアンサー

forでまわすという発想はよいのですが、formの構造から考えて
「"第" + i + "問"」的なアプローチはバグのもとです。
たとえばtitle属性を使うなどして、調整するとすっきりします。

またformにnameをつけるのは今は非推奨になっているので、
オブジェクトでわたしてやるといいですね。

<script>
function disp(f){
for(var i=0;i<f.length;i++){
var e=f[i];
if(e.type=="text" && e.value==""){
alert(e.title+"が未入力です");
e.focus();
return false;
}
}
return true;
}
</script>

<FORM onsubmit="return disp(this)">
第1問:<INPUT TYPE="text" NAME="No1" title="第1問"><br />
第2問:<INPUT TYPE="text" NAME="No2" title="第2問"><br />
第3問:<INPUT TYPE="text" NAME="No3" title="第3問"><br />
<input type="submit" value="答え合わせ">
</FROM>

お礼

今、試してみましたが無事、動きました！
大筋の意味は分かりますが、完全にまだ理解できてないのでその辺は調べて理解したいと思います。
大変ありがとうございました。

回答No.1

noname#94983

<INPUT TYPE="text" NAME="No1" ID="NO1">として、

if (document.getElementById("No" + i).value == "")

では？

お礼

変数の使い方という意味では、No.2の方の方法よりが楽なので、別のところで使わせていただきたいと思います。
回答ありがとうございました。