非常にシンプルな計算機を作成したいと思っていますが、キーストロークごとに更新する必要があります。その特定のカテゴリーには何も見つからないようです。誰かが私を正しい方向に向けることができますか？
A * 1.325 + B * 3.76のようなものを探しています。ここで、Bはドロップダウンメニューで、Aはユーザーが入力するテキストフィールドです。ドロップダウンが変更されるか、キーストロークがテキストボックスに登録されるたび。
また、数字または小数点のみを許可するように正規表現を実行しようとします。
どうもありがとうございました!!!
PS。PHP/HTMLを使用してフォームを作成します。
ステップ1：
jQueryチュートリアルを実行します。fun fun fun：D：D：D http://docs.jquery.com/Tutorials
ステップ2：
jQueryについて理解したところで、jQueryが一連のイベントハンドラーをサポートしていることに注目してください。たとえば、ドロップダウンメニューの項目に似たものにクリックイベントを割り当てることができます。
$("itemInMyDropDownMenu").click(function(e) {
doSomeCalculation(parseFloat(this.val()));
}
ステップ3：
使用する適切なイベントハンドラーを選択しました。click（ドロップダウンメニューの場合）およびkeyup（テキストフィールドの場合）希望に満ちているように聞こえます。
ステップ4：
いじくり回し続けます。PHPはまったく必要ありません。
最初の質問。単純な計算機だけが必要な場合、なぜAJAXが必要になるのでしょうか。AJAXは、Webページとスクリプトにリクエストを送信し、XML、JSON、html、または単純なテキスト応答を取得できます。
それでもAJAXが必要な場合は、http：//www.w3schools.com/ajax/default.aspをお読みください。
リアルタイム更新：操作 する要素のIDを設定します。フィールドが変更されるたびに呼び出される適切なハンドラーを作成します。
<input type="text" id="field" value="" onChange="javascript: setA(this)"/>
function setA(obj){
var a = 0 ;
if (obj.value)
a = obj.value ;
//call any function to calculate anything and send a.
}
何かを表示したい場合は、ここでidが便利になります。
<div id="result"></div>
document.getElementById("result").innerHTML = 345 ; //just set to what you need
リアルタイムで動作するため、フォームを送信せずに簡単な計算機を作成するためにjavascriptを十分に活用できます。
それが役に立てば幸い ：）
返事を待っている間、私はもう少し調査を行い、探していたものに役立つと思うコードを見つけました。全体を考えすぎていた!!
<html>
<head>
</head>
<body>
<script>
function doMath() {
var totalparts = parseInt(document.getElementById('parts_input').value);
var labor = parseInt(document.getElementById('labor_input').value);
var misc = parseInt(document.getElementById('misc_input').value);
var subtotal = totalparts + labor + misc;
var tax = subtotal * .13;
var total = subtotal + tax;
document.getElementById('subtotal_input').value = subtotal;
document.getElementById('tax_input').value = tax;
document.getElementById('total_input').value = total;
}
</script>
<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>
<div>Labor: <input type="text" id="labor_input" onBlur="doMath();" /></div>
<div>Misc: <input type="text" id="misc_input" onBlur="doMath();" /></div>
<div>Sub Total: <input type="text" id="subtotal_input" readonly="true" /></div>
<div>Tax: <input type="text" id="tax_input" readonly="true" /></div>
<div>Total: <input type="text" id="total_input" readonly="true" /></div>
</body>
</html>
このためにAJAXを使用する必要はなく、使用すべきではありません。代わりに、次のようなことを行う必要があります。
$("#textfieldID, #dropDownMenuID").change(function() {
var aVal = $("#textFieldID").val() == "" ? 0 : parseFloat($("#textFieldID").val());
var bVal = $("#dropDownMenuID").val() == "" ? 0 : parseFloat($("#dropDownMenuID").val());
$("#answerID").text((aVal*1.325 + bVal*3.76).toString());
});
試しましたonchange="calculator()"か？