値を入力して計算してみよう

   

文字を表示できるようになったのでページ上から数値を入力し、計算処理してみます。

数値などの値を入力するにはフォームを使います。そして計算を開始するボタンを用意し、クリックされたら計算するようにします。

その1

まず、JavaScriptのソースを示します。これはヘッダー部に入力しています。

<SCRIPT language="JavaScript">
function Add(){
 document.fm.C.value = document.fm.A.value + document.fm.B.value;
}
</SCRIPT>

つぎに数値入力のためのフォームのソースを示します。

<FORM name="fm">
  <INPUT size="20" type="text" name="A">+
  <INPUT size="20" type="text" name="B">
  <INPUT type="button" value="=" onclick="Add()">
  <INPUT size="20" type="text" name="C">
</FORM>

では、次のフォームに二つの数を入力してその和を計算してみましょう。どういう結果になったでしょう?

+

得られた結果は加算ではなく、文字の連結になってしまいます。試しに文字を入力するとやはり連結されてしまいます。

困りました。なぜでしょう。

その2

演算し+は数値の加算と文字列の連結という二つの機能を持っています。今、フォームのテキスト入力ボックスを使ったので数値を入力しても文字列として扱われたようです。そこでJavaScriptのプログラムを次のように書き換えてみました。

<SCRIPT language="JavaScript">
function Add1(){
 document.fm1.C.value =eval(document.fm1.A.value) + eval(document.fm1.B.value);
}
</SCRIPT>

eval関数を使って、入力ボックスから入力された文字が数字のときは数値に変換し、加算するようにしました。

+

これでうまくいきました。

その3

eval関数を使うと与えれた数式を計算してくれます。

つぎのようなJavaScriptの関数を定義し、フォームのonClickイベントで呼び出します。

function Calc_form(){
  document.fm2,Ans.value = eval(document.fm2.Form.value);
}
 
どこに書く
Hello World!
計算してみよう
時間を取得する
情報を取得する
カレンダー
画像を入れ替え
移動する段落
プルダウンメニューのアンカー