在JavaScript中添加数组项

Question

I want to add price of all items in form of total from below code.

document.getElementById('form-signin').addEventListener('submit', saveItem);
function saveItem(e){
   var items= document.getElementById('items').value;
   var date= document.getElementById('date').value;
   var price= document.getElementById('price').value;
   var expense= {
    items: items,
    date: date,
    price: price
}


if(localStorage.getItem('bill')==null){
var bill=[];
 bill.push(expense);
 localStorage.setItem('bill', JSON.stringify(bill));


} else{

    var bill = JSON.parse(localStorage.getItem('bill'));
    bill.push(expense);
    localStorage.setItem('bill', JSON.stringify(bill));
    console.log(bill);

    }
e.preventDefault();
} 

function fetchResult(){
  var bill = JSON.parse(localStorage.getItem('bill'));
  var result = document.getElementById('total');


   result.innerHTML='';
   for(var i=0;i < bill.length;i++){
   var items= bill[i].items;
   var date= bill[i].date;
   var price= bill[i].price;




  result.innerHTML+= '<table class="table table-bordered">' + '<tr>'+
  '<th>'+'Items'+'</th>'+
  '<th>'+'Date'+'</th>'+
  '<th>'+'Price'+'</th>'+
   '</tr>'+ '<tr>'+
   '<td>'+ items + '</td>'+
   '<td>'+ date+ '</td>'+
   '<td>'+ price + '</td>'+
   '</tr>'+ '</table>';

}

This is output of aboce. Now how to calculate total ??

Answer 1

Eduardo's sample will work, but I went a little further if you're interested in another way to accomplish what you're doing. I made some changes to help you prevent duplicating column headers and clean up the table generation a bit. This code does require jQuery however, and the table needs to already exist.

The form is just there because I needed something to test against... you can remove that part.

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

<form>
  Items: <input type="text" id="items"><br>
  Date: <input type="text" id="date"><br>
  Price: <input type="text" id="price"><br>
  <input type="submit" value="Submit" onClick="saveItem()" >
</form> 

<table id="tbl-items" class="table table-bordered"><thead><tr><th>Items</th><th>Date</th><th>Price</th></tr></thead><tbody id="tbl-items-body"></tbody></table>
<script>
    document.getElementById('form-signin').addEventListener('submit', saveItem);

    function saveItem(){
        var bill=[];

        var expense= { // didn't need the variables.
            items: document.getElementById('items').value,
            date: document.getElementById('date').value,
            price: document.getElementById('price').value
        }

        if(localStorage.getItem('bill') != null){
            bill = JSON.parse(localStorage.getItem('bill'));
        }

        bill.push(expense);
        localStorage.setItem('bill', JSON.stringify(bill))
        console.log(bill);
    } 

    function fetchResult(){
        var bill = JSON.parse(localStorage.getItem('bill'));
        var totalItems = 0;
        var totalPrice = 0;

        for(var i=0;i < bill.length;i++){
        totalItems++;
        totalPrice += bill[i].price;

            $("#tbl-items-body").append(
                $('<tr>').append(
                    '<td>' + bill[i].items + '</td><td>' + bill[i].date + '</td><td>' + bill[i].price + '</td>'
                )
            );
        }

        $("#tbl-items-body").append(
            $('<tr>').append(
                '<td>Total Items: ' + totalItems + '</td><td>Total Price: ' + totalPrice + '</td>'
            )
        );
    }
</script>

Answer 2

In your fetchResult function while you are adding the price values and displaying in table, add to price to a total variable, then display.

function fetchResult(){
...

   result.innerHTML='';

   var total = 0;

   for(var i=0;i < bill.length;i++){
   var items= bill[i].items;
   var date= bill[i].date;
   var price= bill[i].price;

   total += price;



  result.innerHTML+= '<table class="table table-bordered">' + '<tr>'+
  '<th>'+'Items'+'</th>'+
....

    <span> total </span>
}