Sum of all values in the input field using javascript

Question

The value you entered in the input field id="thousands" will be multiplied by 1000 and the result will be displayed to the input field id="thousands-output". That part of the code is working perfectly. What i want is to get the sum of the value of all the multiplied outputs and display it in the input field id="totalBills". I cant seem to solve this issue. Any help would be appreciated

HTML Code:

     <label>1000</label>
         <div class="input-group">
            <input type="number" class="form-control" name="thousands" id="thousands" />
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="thousands-output" style="width:70%;" readonly />
         </div>

     <label>500</label>
         <div class="input-group">
            <input type="number" class="form-control" name="five_hundreds" id="five_hundreds"/>
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="five_hundreds-output" style="width:70%;" readonly />
         </div>  

<input type="total" id="totalBills" class="form-control" value="0">

Javascript Code:

   var $output = $("#thousands-output");
    $("#thousands").keyup(function() {
        var value = parseFloat($(this).val());    
        $output.val(value*1000);
    });


      var $output2 = $("#five_hundreds-output");
    $("#five_hundreds").keyup(function() {
        var value = parseFloat($(this).val());       
        $output2.val(value*500);
    });

Answer 1

$(document).ready(function(){
    var $output = $("#thousands-output");
    $("#thousands").keyup(function() {
        var value = getValue($(this));
        $output.val(value*1000);
        refreshTotal();
    });
    var $output2 = $("#five_hundreds-output");
    $("#five_hundreds").keyup(function() {
        var value = getValue($(this)); 
        $output2.val(value*500);
        refreshTotal();
    });    
});

function getValue(elem){
  var value = parseFloat($(elem).val());
  if (isNaN(value)){
    value = 0;
  }
  return value;
}

function refreshTotal(){
  var fi = getValue($("#five_hundreds-output"));
  var th = getValue($("#thousands-output"));
  $("#totalBills").val(fi+th);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1000</label>
         <div class="input-group">
            <input type="number" class="form-control" name="thousands" id="thousands" />
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="thousands-output" style="width:70%;" readonly />
         </div>

     <label>500</label>
         <div class="input-group">
            <input type="number" class="form-control" name="five_hundreds" id="five_hundreds"/>
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="five_hundreds-output" style="width:70%;" readonly />
         </div>  

<input type="total" id="totalBills" class="form-control" value="0">

Answer 2

You need to fetch both the values and add it and set it as the value of the input field.

function getSum(){
  var sum = +$("#thousands-output").val() + +$("#five_hundreds-output").val();
  $("#totalBills").val(sum);
}

Call this function inside both the keyup events

var $output = $("#thousands-output");
$("#thousands").keyup(function() {
  var value = parseFloat($(this).val());
  $output.val(value * 1000);
  getSum();
});


var $output2 = $("#five_hundreds-output");
$("#five_hundreds").keyup(function() {
  var value = parseFloat($(this).val());
  $output2.val(value * 500);
  getSum();
});

function getSum(){
  var sum = +$("#thousands-output").val() +  +$("#five_hundreds-output").val();
  $("#totalBills").val(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1000</label>
<div class="input-group">
  <input type="number" class="form-control" name="thousands" id="thousands" />
  <span class="input-group-addon">=</span>
  <input type="text" class="form-control txt" id="thousands-output" style="width:70%;" readonly />
</div>

<label>500</label>
<div class="input-group">
  <input type="number" class="form-control" name="five_hundreds" id="five_hundreds" />
  <span class="input-group-addon">=</span>
  <input type="text" class="form-control txt" id="five_hundreds-output" style="width:70%;" readonly />
</div>

<input type="total" id="totalBills" class="form-control" value="0">

Update:

Using unary operator + to convert string to numbers.

Answer 3

Use querySelectorAll and reduce

//all the outputs are the child of input-group and has type="text"
var allOutputs = document.querySelectorAll( ".input-group input[type='text'].txt" );

//iterate all the output values. If the value is a number, add to the accumulator, else add 0
var sum = [ ...allOutputs ].reduce( ( a, c ) => a + ( isNaN( c.value ) ? 0 : +c.value ) , 0);

//now display this value
document.getElementById( "totalBills" ).value = sum;