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

前回、フォームからcalculate関数を実行できるようにコードを追加して、計算結果をフォームに渡して表示するというところまで記載しました。作成したコードを実行して、数字を入力して計算してみると、

7 + 4を行ったはずなのに、結果が74になりました。これは各フォームに入力した値が数字であっても、変数に入れた時に文字列として判断されたため、7という文字と4という文字を足したものが返ってきたことになります。この症状を回避するために、フォームから取得した値を文字列に変換しなければなりません。

<script>
var form1 = document.querySelector("#form1");
var num1 = form1.value;
//文字列を数字に変換して、再度変数に入れなおす
num1 = parseInt(num1);

var form2 = document.querySelector("#form2");
var num2 = form2.value;

//文字列を数字に変換して、再度変数に入れなおす
num2 = parseInt(num2);

//計算結果を入れる変数を用意する
var addition;
addition = num1 + num2;

//計算結果表示用のフォーム
var resultForm = document.querySelector("#result");
resultForm.value = addition;
</script>

parseIntは変数の中に入っている文字列の値を数字に変換する関数で、計算を行う前に各値を数字にする必要があります。この処理を行った上で再度表示を行ってみると、

7 + 4 = 11で、期待する値が結果のフォームに表示されました。今回の処理から変数の中に入っている値がどのような型(文字列か数字か)を意識してプログラミングを書く必要があるということが分かりました。