JavaScript Form　name属性 (radio text）標準体重を求める

本日は、JavaScript Form　name属性 (radio text）を使用して、計算結果を表示させたいと思います。

【計算過程】

ユーザーに男性か女性か選択してもらう。
ユーザーに身長を入力してもらう。
計算ボタンをクリックしてもらう。
標準体重が表示されます。

【復習】

ラジオボタン：<p>○○○<input type="radio"> ○○○</p>

ボタン：<p><input type="button" value="○○"></p>

テキスト入力画面：<p>○○：<input type="text">○○</p>

【準備】

フォームを先に設定します。

f:id:kaoru01-05:20140413160957p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>標準体重を求める</title>
</head>

<body>
<form>
<p>男性：<input type="radio"> 女性：<input type="radio"></p>
<p>身長：<input type="text">cm</p>
<p><input type="button" value="計算"></p>
<p>体重：<input type="text">kg</p>
</form>
</body>
</html>

【これで完成】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>標準体重を求めるフォームが完成</title>
<script>
function stdWeight(myForm){ /*name属性を使用*/

　→function：ローカル変数

　　　　　　　　　　→myForm：この下のフォームの事を指す引数、これが無いと計算結果が下のフォームに引き継がれないので注意！
var hgt,wgt;
hgt =Number(myForm.height.value);

　　　　→Number：入力されたものは文字列になってしまう為、入力された値を強制的に数値にもどす。

　　　　　　　　　　　　　　→value：インプットに入ってきたデータの事

/*valueはinput要素などのvalue属性の値を取得(もしくは設定)するものです。*/
if(myForm.gender[0].checked){

/*チェックボックスは、配列一番目から0番.1番.・・・と続いて行く。今回は男性が先に記載されているので０*/
wgt = (hgt - 80) * 0.7;
        }else{
        wgt =(hgt - 70)*0.6;
    }
        myForm.weight.value = Math.round(wgt,2);　

/*,2で桁数を設定している。今回の標準体重を求める例題が、たまたま小数点以下二位まで答えに出にくいので設定しなくてもOk*/
/*myForm.weight.value = Math.floor(wgt);　これだと、切捨てとなります*/
}
</script>
</head>
<body>
<form name="weightForm">
<p>

男性：<input type="radio" name="gender" checked>

女性：<input type="radio" name="gender" checked></p>
<p>身長：<input type="text" name="height">cm</p>
<p><input type="button" value="計算" name="calc" onclick="stdWeight(this.form)"></p>

　　　　　　　　　　　　　　　　　　　　→calcは特に機能無し　　　→this.form：名前は取得していないが、thisと書くことによって、自分のformの中で取得した値をさしている。thisによって、名前が省略されている。