■ 入力フォームで計算

Javascriptで四則演算が計算できるフォームを作成します。
このサンプルでは2つの入力項目を指定された記号で演算を行います。

「+」は加算、「-」は減算、「*」は乗算、「/」は除算を行います。
※「Javascriptサンプル」−「入力項目のチェック」「入力フォームで計算」も参考にしてください。

◆ 実行サンプル

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「jscalc.js」というファイル名で保存します。
function calc_sum(){ num1 = document.frm1['num1'].value num2 = document.frm1['num2'].value cal0 = document.frm1['cal0'].value; if (cal0 == "+") sum1 = eval(num1) + eval(num2); if (cal0 == "-") sum1 = eval(num1) - eval(num2); if (cal0 == "*") sum1 = eval(num1) * eval(num2); if (cal0 == "/") sum1 = eval(num1) / eval(num2); document.frm1['num3'].value = sum1; return false; } function reset_exe(){ sum1 = ""; if (confirm('リセットします。')){ document.frm1['num1'].value = ""; document.frm1['num2'].value = ""; document.frm1['num3'].value = sum1; } }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="jscalc.js"></script>

最後に計算項目を入力するための入力フォームを次のように記述します。 <form name="frm1" action="dummy" class="exp01"> <input size="4" type="text" name="num1">　 <select name="cal0"> <option value="+">＋</option> <option value="-">−</option> <option value="*">＊</option> <option value="/">／</option> </select>　 <input size="4" type="text" name="num2">　 <strong>＝</strong>　 <input size="5" type="text" name="num3" readonly>　 <input type="button" value="計算" onclick="calc_sum();">　 <input type="button" value="クリア" onclick="return reset_exe();"> </form>