JavaScript input aggregation function not including default input values

Question

I have a JavaScript function to aggregate the values of input fields, which I sourced from this answer to a similar question. My function appears to be working, however it only calculates the total value after one of the default values has been amended. How can I include the default values in the functions aggregation from the start? Here's a fiddle, and here's the code:

JavaScript:

$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".qty1").each(function() {

    $(this).keyup(function(){
        calculateSum();
                    });
                });

            });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".qty1").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
    $("#sum").html(sum.toFixed(2)) * 0.2;}

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
</tr>
<tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32"/></td>
</tr>
<tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47"/></td>
</tr>
<tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31"/></td>
</tr>
<tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69"/></td>
</tr>
<tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
</tr>
<tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
</tr>

score 3 · Accepted Answer · answered Jan 23 '19 at 13:09

Simply call calculateSum() inside $(document).ready and outside of the keyup event:

$(document).ready(function(){
  calculateSum(); //call the function here
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).keyup(function(){
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").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
  $("#sum").html(sum.toFixed(2));
}

body {
  font-family: sans-serif;
}
#summation {
  font-size: 18px;
  font-weight: bold;
  color:#174C68;
}
.txt {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32"/></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47"/></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31"/></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69"/></td>
  </tr>
  <tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
  </tr>
  <tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
  </tr>
</table>

JavaScript input aggregation function not including default input values

1 Answers1