Q:

Calculate summation from data in input fields by using javascript

I'm starting at learning javascript and I have a problem
here is my html code:
<tr>
  <td>
    Qty1 : <input class="txt" type="number" id="qty1"/>
  </td>
  <td>Value: <input type="text" class="getPrice" id="id1"></td>
</tr>
<tr>
  <td>
    Qty2 : <input class="txt" type="number" id="qty2"/>
  </td>
  <td>Value: <input type="text" class="getPrice" id="id2"></td>
</tr>
<tr>
  <td>
    Qty3 : <input class="txt" type="number" name="qty" id="qty3"/>
  </td>
  <td>Value: <input type="text" class="getPrice" id="id3"></td>
</tr>
<br><br>
<tr>
  <td>Summation of value : </td>
  <td><span id="sums">0</span></td>
</tr>

and here is my js code
/* get data */
qty1.oninput = function() {
    var inputF1 = document.getElementById("id1");
  inputF1.value = qty1.value*2;
};
qty2.oninput = function() {
    var inputF2 = document.getElementById("id2");
  inputF2.value = qty2.value*3;
};
qty3.oninput = function() {
    var inputF3 = document.getElementById("id3");
  inputF3.value = qty3.value;
};

/* calculate sumation */
$(document).ready(function(){
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".getPrice").each(function() {
    $(this).on('input',function(){
      calculateSum();
    });
  });
  calculateSum();
});

function calculateSum() {
  var sum = 0;
  //iterate through each textboxes and add the values
  $(".getPrice").each(function() {
    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }
  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sums").html(sum.toFixed(2));
}

My problem is that when I click on the Qty input fields then the summation should be calculated. However, I have to enter values for the value input fields for my calculate function works.
How I can fix it? My expected result is that when I input the qyt input field it must calculate the summation and return the result.
For example, when I entered 1 in Qty1 field the summation should be 2 then I entered 3 in Qty2 the summation should return 11 and so on.
Thank you for your help!
my demo code: https://jsfiddle.net/1c0r6uhd/

A:

You will have to call calculateSum after each value field is updated. Currently, you call it on the input event, which is fired before the actual value has been updated. Here is an example:

$('#qty1').on('input', function() {
  $('#id1').val(this.value * 2).change();
})

$('#qty2').on('input', function() {
  $('#id2').val(this.value * 3).change();
});

$('#qty3').on('input', function() {
  $('#id3').val(this.value).change();
});

$('.getPrice').change(function calculateSum() {
  var sum = 0;
  //iterate through each textboxes and add the values
  $(".getPrice").each(function() {
    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }
  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sums").html(sum.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
  <td>
    Qty1 : <input class="txt" type="number" id="qty1"/>
  </td>
  <td>Value: <input type="text" class="getPrice" id="id1"></td>
</tr>
<tr>
  <td>
    Qty2 : <input class="txt" type="number" id="qty2"/>
  </td>
  <td>Value: <input type="text" class="getPrice" id="id2"></td>
</tr>
<tr>
  <td>
    Qty3 : <input class="txt" type="number" name="qty" id="qty3"/>
  </td>
  <td>Value: <input type="text" class="getPrice" id="id3"></td>
</tr>
<br><br>
<tr>
  <td>Summation of value : </td>
  <td><span id="sums">0</span></td>
</tr>
</tbody>
</table>

