足し算の箇所をプルダウン形式(選択肢がいくつかあるフォーム)で足し算の他に引き算、掛け算と割り算の選択をできるようにします。プルダウン形式も今までのフォームと同様にHTMLで追加しますが、<input type="***">の形式では対応できません。そこで<select>を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//計算するための関数
function calculate(){
//省略
}
</script>
</head>
<body>
<input type="number" value="" id="form1">
<select id="operator">
<option>+</option>
<option>-</option>
<option>×</option>
<option>÷</option>
</select>
<input type="number" value="" id="form2">
=
<input type="number" id="result">
<input type="button" value="計算する" onclick="calculate();">
</body>
</html>
計算方法のプルダウン形式(セレクトボックス)が追加できたら、次は関数内の処理を見ていきます。
function calculate(){
var form1 = document.querySelector("#form1");
var num1 = form1.value;
var form2 = document.querySelector("#form2");
var num2 = form2.value;
//計算結果を入れる変数を用意する
var addition;
var operator = document.write("#operator");
//<select>でも選択した値は.valueで取得します。
var op = operator.value;
//選択した項目のoptionの文字列によって計算方法を変える
if (op == "+") {
addition = num1 + num2;
} else if (op == "-") {
addition = num1 - num2;
} else if (op == "×") {
addition = num1 * num2;
} else {
addition = num1 / num2;
}
//計算結果表示用のフォーム
var resultForm = document.querySelector("#result");
resultForm.value = addition;
}
あとは計算結果をresultFormのvalueに放り込めば処理は終了です。
0 件のコメント:
コメントを投稿