간단한 계산기 jquery 스크립트

Question

그래서 아주 간단한 스크립트를 작성하여 계산기로 작성하여 클라이언트가 서비스 비용을 얼마나 많이 볼 수 있는지 확인한 다음 텍스트 입력 변경을 기반으로 결과를 업데이트 할 수 있습니다. 문제는 처음으로 돌아가서 값을 올바르게 계산하지 않는 것입니다. 여기 그것이 도움이된다.

<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. 두 번째 변경 기능을 제거하십시오. 전혀 필요하지 않습니다.

$(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); 
    }); 
});​