javascript - 如何将两个不同函数的乘积求和成一个新函数？

Question

现在我有两个不同的函数来计算菜单上两个不同部分(开胃菜和主菜)的总成本。现在我想做的是创建第三个函数，它将为我提供开胃菜和主菜成本的总计。

这是我的两个功能:

function AppSubTotal() {
  var guestsQTY = +document.getElementById('guests').value || 0,
      input = document.getElementsByName("app"),
      appItemTotal = 0;
  var appsubtotal = 0;

  for (var i = 0; i < input.length; i++) {
      if (input[i].checked) appItemTotal += +input[i].value;
  }
  document.getElementById("appsubtotal").value = "$" + (appItemTotal * guestsQTY * percentage).toFixed(2);

  appsubtotal.innerText = appsubtotal;
}

function MainDishSubTotal() {
  var guestsQTY = +document.getElementById('guests').value || 0,
      input = document.getElementsByName("maindish"),
      maindishItemTotal = 0;
  var maindishtotal = 0;

  for (var i = 0; i < input.length; i++) {
      if (input[i].checked) maindishItemTotal += +input[i].value;
  }
  document.getElementById("maindishtotal").value = "$" + (maindishItemTotal * guestsQTY * percentage).toFixed(2);

  maindishtotal.innerText = maindishtotal;
}

这就是我在 HTML 中显示开胃菜总数和主菜总数的方式

<label>
  <h1>
   Total Appetizers Costs:
   <input value="$0.00" readonly="readonly" type="text" id="appsubtotal"/>
  </h1>
</label>

<label>
  <h1>
 Total Main Dish Costs:
  <input value="$0.00" readonly="readonly" type="text" id="maindishtotal"/>
   </h1>
</label>    

我启动了一个新函数来保存总计。我尝试遵循另一个关于如何完成此操作的教程，但它似乎对我不起作用，但这就是我到目前为止所拥有的。

function GrandTotal() {
  var totalApp = appsubtotal.innerText || 0;
  var totalMain = maindishtotal.innerText || 0;

document.getElementById('grandtotal').innerText = Number(totalApp) + Number(totalMain);

}

  document.addEventListener('keyup', function() {
  AppSubTotal();
  MainDishSubTotal();

}); 

然后我希望当用户在 HTML 中选择菜单的不同项目时自动更新总计，如下所示:

<label>
  <h1>
  Your Grand Total is:
   <input value="$0.00" readonly="readonly" type="text" id="grandtotal"/>
   </h1>
 </label>

Answer 1

您需要在其他 2 个函数的末尾调用 GrandTotal():

function AppSubTotal() {
  var guestsQTY = +document.getElementById('guests').value || 0,
      input = document.getElementsByName("app"),
      appItemTotal = 0;
  var appsubtotal = 0;

  for (var i = 0; i < input.length; i++) {
      if (input[i].checked) appItemTotal += +input[i].value;
  }
  document.getElementById("appsubtotal").value = "$" + (appItemTotal * guestsQTY * percentage).toFixed(2);

  appsubtotal.innerText = appsubtotal; //here sub total updated
  GrandTotal();

}

function MainDishSubTotal() {
  var guestsQTY = +document.getElementById('guests').value || 0,
      input = document.getElementsByName("maindish"),
      maindishItemTotal = 0;
  var maindishtotal = 0;

  for (var i = 0; i < input.length; i++) {
      if (input[i].checked) maindishItemTotal += +input[i].value;
  }
  document.getElementById("maindishtotal").value = "$" + (maindishItemTotal * guestsQTY * percentage).toFixed(2);

  maindishtotal.innerText = maindishtotal; //here main dish updated
  GrandTotal();
}