 3.フォームを使いこなせ |
例えば、先程の「じゃんけん」をリンクではなくボタンで作ってみると、下のようになります。
<html><head>
<script language="JavaScript">
var aite;
var message;
function clickhere(n){
aite=Math.floor(Math.random()*3+1);
if(n==1) message="あなた：グー\n";
if(n==2) message="あなた：チョキ\n";
if(n==3) message="あなた：パー\n";
if(aite==1) message+="相手：グー\n";
if(aite==2) message+="相手：チョキ\n";
if(aite==3) message+="相手：パー\n";
if(n==aite) message+="あいこです";
else {
if((n+1)%3==aite%3) message+="あなたの勝ち";
else message+="相手の勝ち";
}
alert(message);
}
</script></head>
<body>
じゃんけん大会！ 好きなところをクリックしてね。<br>
<form>
<input type=button onClick="JavaScript:clickhere(1);" value="グー"><br>
<input type=button onClick="JavaScript:clickhere(2);" value="チョキ"><br>
<input type=button onClick="JavaScript:clickhere(3);" value="パー"><br>
</form></body></html> |
document.フォーム名.部品（エレメント）名.value = 値；
で表します。ここで、フォーム名とは、<form name=… で書かれるnameの部分です。部品名は、<input type=button name=… で書かれるnameの部分ですが、部品番号を使って、elements[0]と表現することもあります。
ここで、「部品番号」という言葉が出てきましたが、部品番号*1というのは、フォームの部品を置いた順番に、０，１，２…と順番につく番号です。下の例を見てみましょう。
*1 「部品番号」というのは、分かりやすく説明するために、私が作った造語です。他の人に話しても通じません。ご注意下さい。
<html><head>
<script language="JavaScript">
function clickhere(n){
alert(document.form1.elements[n].value);
}
</script></head>
<body>
<form name="form1">
<input type=button onClick="JavaScript:clickhere(0);" value="０番"><br>
<input type=button onClick="JavaScript:clickhere(1);" value="１番"><br>
<input type=button onClick="JavaScript:clickhere(2);" value="２番"><br>
</form></body></html> |
さて、話を戻しましょう。フォームへの出力でしたね。
フォームへの出力が可能になると、今までalert で結果を表示していたものが、テキストボックスなどで表示できるので、表現が広がります。「じゃんけん」で、テキストボックスを使ってみましょう。
<html><head>
<script language="JavaScript">
var aite;
var message;
function clickhere(n){
aite=Math.floor(Math.random()*3+1);
if(n==1) message="グー";
if(n==2) message="チョキ";
if(n==3) message="パー";
document.form1.elements[3].value=message; //あなたの手
if(aite==1) message="グー";
if(aite==2) message="チョキ";
if(aite==3) message="パー";
document.form1.elements[4].value=message; //相手の手
if(n==aite) message="あいこです";
else {
if((n+1)%3==aite%3) message="あなたの勝ち";
else message="相手の勝ち";
}
document.form1.elements[5].value=message; //結果表示
}
</script></head>
<body>
じゃんけん大会！ 好きなところをクリックしてね。<br>
<form name="form1">
<input type=button onClick="JavaScript:clickhere(1);" value="グー"><br>
<input type=button onClick="JavaScript:clickhere(2);" value="チョキ"><br>
<input type=button onClick="JavaScript:clickhere(3);" value="パー"><br><br>
あなたの手 <input type=text><br>
相手の手 <input type=text><br>
結果 <input type=text><br>
</form></body></html> |
<html><head>
<script language="JavaScript">
function clickhere(){
alert(document.form1.elements[0].value+"さん、こんにちは！");
}
</script></head>
<body>
<form name="form1">
名前→ <input type=text><br>
<input type=button onClick="JavaScript:clickhere();" value="クリック！"><br>
</form></body></html> |
document.フォーム名.部品（エレメント）名.checked
を使います。もしチェックが入っていればtrue を、入っていなければfalse を返すので、if 文の処理が便利です。「じゃんけん」をラジオボタンで入力させる場合は、下のようにします。
<html><head>
<script language="JavaScript">
var aite;
var message;
function clickhere(){
aite=Math.floor(Math.random()*3+1);
var n=0;
if(document.form1.elements[0].checked){ //グーにチェック
n=1;
message="グー";
}
if(document.form1.elements[1].checked){ //チョキにチェック
n=2;
message="チョキ";
}
if(document.form1.elements[2].checked){ //パーにチェック
n=3;
message="パー";
}
document.form1.elements[4].value=message; //あなたの手
if(aite==1) message="グー";
if(aite==2) message="チョキ";
if(aite==3) message="パー";
document.form1.elements[5].value=message; //相手の手
if(n==aite) message="あいこです";
else {
if((n+1)%3==aite%3) message="あなたの勝ち";
else message="相手の勝ち";
}
document.form1.elements[6].value=message; //結果表示
}
</script></head>
<body>
じゃんけん大会！ 自分の手を選択したら「勝負」を押してね。<br>
<form name="form1">
<input type=radio name="myhand" value="goo" checked>グー<br>
<input type=radio name="myhand" value="choki">チョキ<br>
<input type=radio name="myhand" value="paa">パー<br>
<input type=button onClick="JavaScript:clickhere();" value="勝負"><br><br>
あなたの手 <input type=text><br>
相手の手 <input type=text><br>
結果 <input type=text><br>
</form></body></html> |
プルダウンを使った選択も、よく見かけます。プルダウンの場合、複数の選択項目から１つを選ぶケースがほとんどなので、selectedIndex がよく使われます。書式は、
document.フォーム名.部品（エレメント）名.selectedIndex
です。返す値は、選択された番号（一番最初の<option>を0とする）です。
下の例は、「じゃんけん」でプルダウンを適応した例です。ラジオボタンの時とあまり変わりませんが、番号を返す分、n の代入文が楽になります。
<html><head>
<script language="JavaScript">
var aite;
var message;
function clickhere(){
aite=Math.floor(Math.random()*3+1);
var n=0;
if(document.form1.elements[0].selectedIndex==0){ //グーが選択された
message="グー";
}
if(document.form1.elements[0].selectedIndex==1){ //チョキを選択
message="チョキ";
}
if(document.form1.elements[0].selectedIndex==2){ //パーを選択
message="パー";
}
n=document.form1.elements[0].selectedIndex+1; //勝敗判定に利用
document.form1.elements[2].value=message;
if(aite==1) message="グー";
if(aite==2) message="チョキ";
if(aite==3) message="パー";
document.form1.elements[3].value=message;
if(n==aite) message="あいこです";
else {
if((n+1)%3==aite%3) message="あなたの勝ち";
else message="相手の勝ち";
}
document.form1.elements[4].value=message;
}
</script></head>
<body>
じゃんけん大会！ 自分の手を選択したら「勝負」を押してね。<br>
<form name="form1">
<select><option>グー<br>
<option>チョキ<br>
<option>パー<select><br>
<input type=button onClick="JavaScript:clickhere();" value="勝負"><br><br>
あなたの手 <input type=text><br>
相手の手 <input type=text><br>
結果 <input type=text><br>
</form></body></html> |