前回作成したフォームにJavaScriptのコードで処理を追加するために関数を用意します。HTMLにJavaScriptを書いて実行するためには<head>か<body>で囲まれた箇所に<script>で囲んでコードを書きます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//ここにJavaScriptのコードを書く
</script>
</head>
<body>
<script>
//ここにもJavaScriptのコードを書ける
</script>
</body>
</html>
前回作成したフォームを元に最初に関数を用意してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//計算するための関数
function calculate(){
}
</script>
</head>
<body>
<input type="number" value="">
+
<input type="number" value="">
=
<input type="number">
<input type="button" value="計算する">
</body>
</html>
この関数をHTMLで作成したボタンで実行するためには、ボタンにイベントを追加します。
<input type="button" value="計算する" onclick="calculate();">
ボタンのHTMLコードにonclick="関数名"を追加し、ボタンを押すことで指定した関数は実行されます。それでは、事前に用意した各フォームから入力した値を取り出して計算する関数を書いてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//計算するための関数
function calculate(){
}
</script>
</head>
<body>
<input type="number" value="" id="form1">
+
<input type="number" value="" id="form2">
=
<input type="number" id="result">
<input type="button" value="計算する" onclick="calculate();">
</body>
</html>
ボタンを押したときに各フォームからそれぞれ値を取り出したいので、各フォームの識別のために<input type="number">にid(フォームの名前)を追加しておきます。id名は自由です。idを振り分けたフォームをJavaScriptの関数内で取得するために、document.querySelector()という予め用意されている関数を利用します。querySelector()の引数に#を付けたid名を入れます。
var form1 = document.querySelector("#form1");
var form2 = document.querySelector("#form2");
取得したform1をwindow.alert(form1);で値を見ても、[object HTMLInputElement]を表示されて、入力した値を取得できません。(window.alert()はポップアップで値を表示してくれるので、開発時の値の確認では便利です。) document.querySelectorでは表示されているフォーム全体を取得しているので、フォームの中のどの要素の値がほしいかを指定しなければなりません。入力した値は<input type="number" value="">のvalueに入っているので、
var num1 = form1.value;と、フォームそのものを入れた変数の後に.(ドット)valueをつなげて値を取得します。
var form1 = document.querySelector("#form1");
var num1 = form1.value;
window.alert(num1);
num1の値を確認すると、入力した値が入っていることが分かります。それでは用意したcalculate関数の中でformから値を取得して、計算をしてみましょう。
<script>
function calculate(){
var form1 = document.querySelector("#form1");
var num1 = form1.value;
var form2 = document.querySelector("#form2");
var num2 = form2.value;
//計算結果を入れる変数を用意する
var addition;
addition = num1 + num2;
//計算結果表示用のフォーム
var resultForm = document.querySelector("#result");
resultForm.value = addition;
}
</script>
計算結果もフォームに入れたいので、resultForm = document.querySelector("#result");でフォームを取得しておいて、valueに値を入れます。入れる時、他のフォームで値を取得した方法と逆で、resultForm.value = addition;とすることでフォームに値を入れて表示させることができます。
このコードを実行すると意図しない問題が発生しますが、それは次回に説明します。
