查询将两个输入字段加在一起答案

【问题标题】：query add two input fields together查询将两个输入字段加在一起
【发布时间】：2012-02-19 00:21:19
【问题描述】：

我有以下代码。我想将两个输入字段添加在一起并将其输出到页面。我能够输出输入字段中的类型，但是我不知道如何将两个字段加在一起并输出。我有它在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

<form method="post">
    <input type="text" id="the_input_id">
    <input type="text" id="the_input_id1">
</form>
<div id="output_ele">

</div>
<div id="output_ele1">

</div>
<div id="total">

</div>

【问题讨论】：

var total = firstInput + firstInput1; 是行不通的。这些变量是本地的。

标签： jquery input addition

【解决方案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/

【讨论】：

+1 - 只是不要忘记检查输入值是否真的是数字，如果不是，则显示适当的消息。
小提琴中的firstinput 和firstinput1 是什么？您还没有引用它们，但它们仍然是如何在小提琴中工作的？

【解决方案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/

【讨论】：