Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
※DHTMLについては「DHTMLサンプル」もご参照下さい。
■ 項目の入力チェック
Javascriptで入力項目のチェックを行います。
このサンプルでは2つの入力項目のうちどちらかが入力されてなかったらエラーメッセージを表示します。
「+」は加算、「-」は減算、「*」は乗算、「/」は除算を行います。
※「Javascriptサンプル」−「入力項目のチェック」「入力フォームで計算」も参考にしてください。
◆ 実行サンプル
略号の説明 | 動作が確認できたブラウザ |
---|---|
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53 |
- 【記述サンプル】
-
まず、テキストエディタなどを使用し、次の記述を「inpchk.js」というファイル名で保存します。
function calc_sum(){ num1 = document.frm1['num1'].value num2 = document.frm1['num2'].value cal0 = document.frm1['cal0'].value; if ((num1 == "") || (num2 == "")) { alert("数値は必ず入力してください。"); return false; } 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="inpchk.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>