2014年9月8日月曜日

HTMLのフォームにJavaScriptで処理を追加して計算機を作ろう1

前回作成したフォームに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;とすることでフォームに値を入れて表示させることができます。

このコードを実行すると意図しない問題が発生しますが、それは次回に説明します。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)