查询将两个输入字段一起添加

我有以下代码。 我想将两个输入字段一起添加并输出到页面。 我能够输出输入字段中的类型但是我无法想出如何将两个字段一起添加并输出它。 我在http://jsfiddle.net/erick/9Dj3j/3/

jQuery的

$(function() { var output_element = $('#output_ele'); var output_element1 = $('#output_ele1'); $('#the_input_id').keyup(function() { var their_input = $(this).val(); var firstInput = output_element.text(their_input); }); $('#the_input_id1').keyup(function() { var their_input1 = $(this).val(); var firstInput1 = output_element1.text(their_input1); }); var output_total = $('#total'); var total = firstInput + firstInput1; output_total.text(total); }); 

HTML

 
   
 
 
 
 
 ​
 
​​​​​​​​​​​​​​​ 

Answer 1

您发布的代码由于几个原因而无法正常工作

• 在keyUp ，将新值分配给firstInput和firstInput1 ，它们是回调的本地值
• 总值是在这些回调之外计算的，因此无法访问这些本地（这些值几乎肯定是undefined ）
• 总计仅在启动时计算一次，而不是每次点击一次

你需要做的是编写一个函数，将两个值相加并从keyUp处理程序调用它

 $('#the_input_id').keyup(function() { updateTotal(); }); $('#the_input_id1').keyup(function() { updateTotal(); }); var updateTotal = function () { var input1 = parseInt($('#the_input_id').val()); var input2 = parseInt($('#the_input_id1').val()); if (isNaN(input1) || isNaN(input2)) { $('#total').text('Both inputs must be numbers'); } else { $('#total').text(input1 + input2); } }; 

小提琴： http ： //jsfiddle.net/9Dj3j/56/

Answer 2

我对上面的答案做了一点修改，这里是最后的javascript：

 $(function() { $('#the_input_id, #the_input_id1').keyup(function(){ updateTotal(); }); var updateTotal = function () { var input1 = parseInt($('#the_input_id').val()); var input2 = parseInt($('#the_input_id1').val()); if (isNaN(input1) || isNaN(input2)) { if(!input2){ $('#total').val($('#the_input_id').val()); } if(!input1){ $('#total').val($('#the_input_id1').val()); } } else { $('#total').val(input1 + input2); } }; var output_total = $('#total'); var total = input1 + input2; output_total.val(total); }); 

小提琴： http ： //jsfiddle.net/9Dj3j/259/