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

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;

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

 $(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">