查询将两个输入字段加在一起 [英] query add two input fields together

问题描述

我有以下代码.我想将两个输入字段加在一起并将其输出到页面.我可以在输入字段中输出什么是类型，但是我无法弄清楚如何将两个字段加在一起并输出.我在 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>​​​​​​​​​​​​​​​

解决方案

您发布的代码由于某些原因无法正常工作

• 在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/

I have the following code. I want to add two input fields together and output it to the page. I get as far as being able to output what is type in the input field however I can't figure how to add the two fields together and output it. I have it at 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>​​​​​​​​​​​​​​​

解决方案

The code you posted isn't working for a couple of reasons

• On keyUp you assign the new values to firstInput and firstInput1 which are local to the callback
• The total value is calculated outside these callbacks and hence doesn't have access to those locals (the values are almost certainly undefined)
• The total is only calculated once on startup instead of once per click

What you need to do is write a function that adds the two values together and call that from the keyUp handler

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

Fiddle: http://jsfiddle.net/9Dj3j/56/

这篇关于查询将两个输入字段加在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！