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

发布于 2025-01-06 13:27:32 字数 1068 浏览 4 评论 0原文

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雪化雨蝶 2025-01-13 13:27:32

您发布的代码由于多种原因不起作用

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

您需要什么要做的就是编写一个函数，将两个值相加并调用来自 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/

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/

回复收藏 0 原文

做个ˇ局外人 2025-01-13 13:27:32

我对上面的答案做了一些修改，这是最终的 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);

});

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

I did a little modification on the answer above and here is the final 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);

});

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

回复收藏 0 原文

~没有更多了~