Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

formオブジェクトを使って標準体重を計算

formオブジェクトを使って下図のような標準体重を計算できるように作成しました。

f:id:suge1040:20140411103241j:plain

 

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォームの利用</title>
<script>
function stdWeight(myForm) {
    var height, weight;
      height = Number(myForm.height.value);
        if(myForm.sex[0].checked) {
            weight = (height - 80) * 0.7;
        } else {
            weight = (height - 70) * 0.6;
        }
        myForm.weight.value = weight;
}
</script>
</head>

<body>
<form name="weightForm">
<p>男性:<input type="radio" name="sex" checked> 女性:<input type="radio" name="sex"></p>
<p>身長:<input type="text" name="height">cm</p>
<p><input type="button" value="計算" name="calc" onClick="stdWeight(this.form)"></p>
<p>標準体重:<input type="text" name="weight">kg</p>
</form>
</body>
</html>

 

※ポイント

myForm:formオブジェクト

height:textオブジェクト

value:valueプロパティ(テキストボックス内の文字列を表す)