JavaScriptによる製品計算機の合計金額

それでは、テーブルの下に購入の合計金額が表示されるようにしましょう。ここには注意点があります。

状況を考えてみると、合計金額は新しい購入を追加したときだけでなく、削除や編集を行ったときにも修正される必要があることがわかります。

この場合、完全な合計金額の再計算を行う、recountTotalという関数を作成することを提案します。この関数はすべての購入をループで処理し、それらのcost列の内容を合計します。

このような関数があれば、合計金額に何らかの変更が想定される場所でいつでも呼び出すことができます。もちろん、毎回合計金額を計算するのは少し非効率です。しかし、コードが大幅に簡素化されます。

新しい購入を作成する際に、想定した関数を使用します：

javascriptadd.addEventListener('click', function() {
  let tr = document.createElement('tr');
  
  createCell(tr, name.value, 'name');
  createCell(tr, price.value, 'price');
  createCell(tr, amount.value, 'amount');
  createCell(tr, price.value * amount.value, 'cost');
  createCell(tr, '削除', 'remove');
  
  table.appendChild(tr);
  recountTotal(); // 合計金額を再計算
});

以下が説明した関数のひな形です：

javascriptfunction recountTotal() {
  let costs = table.querySelectorAll('.cost');
  
  if (costs) {
    // 合計を見つけて#totalに書き込む
  }
}