запрос добавить два поля ввода вместе

Question

У меня есть следующий код. Я хочу добавить два поля ввода вместе и вывести их на страницу. Я добираюсь до того, что могу выводить то, что является типом во входном поле, но я не могу понять, как добавить два поля вместе и вывести их. Я его на 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>​​​​​​​​​​​​​​​ 

Answer 1

код вы вывесили не работает в течение нескольких причин

• На keyUp присвоить новое значениями firstInput и firstInput1, которые являются локальными для callbac К
• Общая стоимость рассчитывается за пределами этих обратных вызовов и, следовательно, не имеет доступа к этим местным жителям (значения почти наверняка 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); 
    } 
}; 

Fiddle: 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); 

}); 

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