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

エドゥアルドのサンプルが動作しますが、あなたは何をやっている達成する別の方法に興味があるなら、私は少しさらに行きました。列ヘッダーの重複を防ぎ、テーブルの生成を少しきれいにするのに役立ついくつかの変更を加えました。しかし、このコードではjQueryが必要です。テーブルはすでに存在している必要があります。

私はテストするために何かが必要なので、フォームはちょうどそこにあります...その部分を削除することができます。あなたのfetchResult機能で

<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

あなたは価格の値を追加し、テーブルに表示されている間、その後、合計変数に価格を表示して追加します。