Calculate Quantity And Update Inside A Table By JavaScript

I want to do the following: After an item with amount has been added, write a function to calculate the total quantity when the table have any change in items updated and return th

Solution 1:

While adding the order items do not add them directly to the table. Create a data object (array of objects [{item: 'itemName', quantity: 1, price: quantity*actualprice}] ). If the same item got to add then update the item count in the object and pass the object to build the table and update the table.

Solution 2:

Add a variable to store total and the qty when user click's add button:

Here is the working and updated code:

var total = 0;
var lastQnt = 0;

function registerHandlers() {
    var buttons = document.querySelectorAll('.button');
    [].slice.call(buttons).forEach(function(button) {
        button.addEventListener('click', onClick, false);
    });
}

function onClick(event) {
    event.preventDefault();
    var button = event.target;
    var id = button.id;
    var desc = document.getElementById(id + '-img').getAttribute('title');
    var qty = document.getElementById(id + '-qty').value;
    total += parseInt(qty)
    addToTable(desc, qty);
}

function addToTable(desc, qty) {
  lastQnt = qty;
    var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
    var tbody = document.querySelector('#orderlist tbody');
    tbody.innerHTML = tbody.innerHTML + row;
    document.getElementById("val").innerHTML = total;
}

function deleteLastRow() {
  total -= lastQnt;
  document.getElementById("val").innerHTML = total;
}



registerHandlers();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Sushi" class="tabcontent">
   <form action="#" method="get">
      <table border="0" style="width:100%">
         <tr>
            <td>
               <img src="sushi-1.jpg" id="su1-img" title="Sushi Set A">
               <input id="su1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="sushi-2.jpg" id="su2-img" title="Sushi Set B">
               <input id="su2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="sushi-3.jpg" id="su3-img" title="Sushi Set C" width="125" height="135">
               <input id="su3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
         <tr>
            <td rowspan="3">
               <img src="sushi-4.jpg" id="su4-img" title="Sushi Set D">
               <input id="su4-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="su4" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
      </table>
   </form>
</div>
<div id="Drinks" class="tabcontent">
   <form action="#" method="get">
      <table border="0" style="width:100%">
         <tr>
            <td>
               <img src="drink-1.jpg" id="dr1-img" title="Guava juice">
               <input id="dr1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="dr1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="drink-2.jpg" id="dr2-img" title="Lemonade">
               <input id="dr2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="dr2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
            <td>
               <img src="drink-3.jpg" id="dr3-img" title="Orange juice" width="125" height="135">
               <input id="dr3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="dr3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
      </table>
   </form>
</div>
<div id="Dessert" class="tabcontent">
   <form action="#" method="get">
      <table border="0" style="width: 100%;">
         <tr>
            <td>
               <img src="dessert-1.jpg" id="de1-img" title="Raspberry cheese cake" width="140" height="125">
               <input id="de1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
               <input id="de1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
            </td>
         </tr>
      </table>
   </form>
</div>
<div style="border:0px;" id="order">
   <center>
      <h2><b>Ordered Items</b></h2>
      14 Mar 2017 15:59
      <br><br>
       <div class="noPrint">
         <a onclick='return deleteLastRow()'>undo</a>
      </div>
      
      Table:4 - No. of Guests 3
      <table class="nth-table" id="orderlist" border="1">
         <thread>
            <tr>
               <th>Description</th>
               <th>Qty</th>
            </tr>
         </thread>
         <tbody>
            <tr>
            </tr>
         </tbody>
         <tfoot>
            <tr>
               <td align="left"><strong>Total</strong></td>
               <td align="right" id="val"><strong></strong></td>
            </tr>
         </tfoot>
      </table>
      <br>
     
   </center>
   <br>
</div>