在javascript中添加數組的項目

Question

想從以下的代碼以總計的形式，添加所有items的price。

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的樣品的工作，但我去一個遠一點，如果你有興趣以另一種方式來完成自己在做什麼。我做了一些更改，以幫助您防止重複列標題並稍微清理表格生成。但是，該代碼確實需要jQuery，並且該表格需要已經存在。

窗體就在那裏，因爲我需要測試對象......你可以刪除該部分。

<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

在你fetchResult功能，而要添加的價格值，並在表中顯示，添加到價格總變量，然後顯示。

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> 
}