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;

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

functiononClick(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);
}

functionaddToTable(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;
}

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



registerHandlers();

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