シンプルな電卓jqueryスクリプト

Question

私は電卓になるために書いていますので、クライアントはサービスのコストを見て、テキスト入力の変更に基づいて結果を更新することができます。問題は最初の周りを回った後、値の計算が正しく停止したことです。ここでは、それはappretiatedヘルプです。

<script> 
$(function(){ 


var one=0; 
var two=0; 
var three=0; 
$("input:text").change(function(){ 
if($(this).val() == $('#first').val()) 
{ 
one = parseInt($(this).val()); 



} 
else if($(this).val() == $('#second').val()){ 

two = parseInt($(this).val()); 

} 
else if($(this).val() == $('#third').val()){ 

three = parseInt($(this).val()); 

} 

}); 


$('input:text').change(function(){ 

$('#result').text(one+two+three); 


}); 


}); 


</script> 

とフォーム：

<div id="container"> 
<form action="something.html" id="subit"> 
<label for="first">put numbers</label><input type="text" id="first"/> 
<label for="second">more numbers</label><input type="text" id="second" value="0"/> 
<label for="third">and more numbers</label><input type="text" id="third" value="0"/> 
<input type="submit" /> 
</form> 
<div id="result"></> 
</div> 

Answer 1

このコードを試してみてください

$(document).ready(function() { 
    var textboxes = $("#container input:text"); 
    textboxes.on("keyup", function() { 
     var amt = 0; 
     textboxes.each(function() { 
      amt += +$(this).val(); 
     }); 
     $("#result").html(amt); 
    }); 
});​ 

ワーキングフィドル：あなたのコード

にこれらの事を変える http://jsfiddle.net/naveen/87p53/あなたのコードについては

---

、

a。 IDと値を比較します。そのより安全な方法です。
b。 2番目の変更機能を削除します。まったく必要ありません。

$(function() { 
    var one = 0; 
    var two = 0; 
    var three = 0; 
    $("input:text").change(function() { 
     if (this.id == "first") { 
      one = parseInt($(this).val()); 
     } 
     else if (this.id == "second") { 
      two = parseInt($(this).val()); 
     } 
     else if (this.id == "third") { 
      three = parseInt($(this).val()); 
     } 
     $('#result').html(one + two + three); 
    }); 
});​