时间戳

首页 > 解决方案 > 如何将两个不同函数的总和求和成一个新函数？

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

问题描述

我早些时候发布了这个问题，但留下了很多关于我的 HTML 代码的信息，所以我会在这里更新它。

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

我想使用提交按钮触发此计算，然后通过输入文本显示该值。

这是我尝试过的：

var percentage = 1.25;

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;
  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;
  GrandTotal();
}

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

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

}

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

});

var grandTotalButton = document.getElementById("gtButton");
if (grandTotalButton.addEventListener) {
  grandTotalButton.addEventListener("click", GrandTotal, false);
} else if (grandTotalButton.attachEvent) {
  grandTotalButton.attachEvent("onclick", GrandTotal);
}
<p> Estimate number of guests: <input type="number" id="guests" min="25" </p>

  <h1>Appetizers Selection - $3 per person </h1>
  <p style="font-size:15px;"> *each selection of an appetizer is $3 per estimate number of guests</p>

  <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Meat Pie - Flaky pastry filled with minced beef, onions and green peppers</label>
  <br><br>
  <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Chin Chin - Fried pastry chips</label>
  <br><br>
  <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Spring Rolls -  Fried flour wrappings with tender-crisp vegetables filling</label>
  <br><br>
  <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Deviled Eggs - Stuffed eggs with yolk paste & mayo topped with paprika</label>
  <br><br>
  <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Kelewele -  Fried plantains seasoned with spices</label>
  <br><br>
  <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Kebab - Spicy meat skewers; choose your meat! (one meat per skewer)</label>
  <br><br>
  <label>
       <h1>
       Total Appetizers Costs:
        <input value="$0.00" readonly="readonly" type="text" id="appsubtotal"/>
       </h1>
      </label>
  </fieldset>

  <!--main dish selection-->
  <fieldset>
    <h1>
      One Pot Rice Selection - $9 per person
    </h1>

    <input type="checkbox" name="maindish" value="9" onclick="MainDishSubTotal()" /> Jollof - Rice made with tomatoes, onions, peas & carrots
    <br><br>
    <input type="checkbox" name="maindish" value="9" onclick="MainDishSubTotal()" /> Waayke - Rice made with black eyed peas
    <br><br>
    <input type="checkbox" name="maindish" value="9" onclick="MainDishSubTotal()" /> Pumpkin Rice Risotto - Creamy rice made with pumpkin puree

    <h1>
      Meat Selection
    </h1>

    <input type="checkbox" name="maindish" value="5" onclick="MainDishSubTotal()" /> Fried Turkey Legs - $5 per person
    <br><br>
    <input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()" /> Baked Chicken Legs - $6 per person
    <br><br>
    <input type="checkbox" name="maindish" value="7" onclick="MainDishSubTotal()" /> Oven Grilled Tilapia - $7 per person

    <h1>
      Fufu & Soup Selection - $10 per person
    </h1>

    <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()" /> Fufu & Light Soup with Tilapia
    <br><br>
    <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()" /> Fufu & Vegan Peanut Soup
    <br><br>
    <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()" /> Fufu & Goat Palm Nut Soup

    <h1>
      Stew Selection - $10 per person
    </h1>

    <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()" /> Kontomire Stew - Prepared with various spinach leaves & various seasonings
    <br><br>
    <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()" /> Tomato Stew - Prepared with various tomatoes & various seasonings
    <br><br>
    <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()" /> Okra Stew - Prepared with okra & seafood

    <h1>
      Starch Selection - $6 per person
    </h1>

    <input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()" /> White Rice - Boiled white rice lightly seasoned with salt
    <br><br>
    <input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()" /> Ampesi - Boiled yam, plantain, cocoyam, & cassava
    <br><br>
    <input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()" /> Banku - Fermented corn & cassava dough
    <br><br>
    <input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()" /> Kenkey - Fermented ground white corn
    <br><br>
    <label>
       <h1>
       Total Main Dish Costs:
        <input value="$0.00" readonly="readonly" type="text" id="maindishtotal"/>
       </h1>
      </label>
  </fieldset>

  <fieldset>
    <label>
       <h1>
       <input type="button" id="gtButton" onclick="GrandTotal()" value="Calculate Grand Total" />
       <br><br>
         Your Grand Total is:
        <input value="$0.00" readonly="readonly" type="text" id="grandtotal"/>
       </h1>
      </label>
  </fieldset>

标签： javascripthtmlcheckbox

解决方案

您要实现的目标听起来相当简单，但是您的代码存在一些问题。您的开胃菜和主菜输入字段正在返回字符串，包括$符号。我会移动您的输入字段的$外部，并且您的输入字段中只有数字 - 您仍然需要使用js Number().

然后在计算总数时，调用GrandTotal()on submit click 事件，并在您的代码中包含以下内容：

function GrandTotal() {
  let appetizerTotalValue = document.getElementById('appsubtotal').value
  let mainDishTotalValue = document.getElementById('maindishtotal').value
  let grandTotalValue = document.getElementById('grandtotal')
  grandTotalValue.value = Number(appetizerTotalValue) + Number(mainDishTotalValue);
}

下面的基本示例：

function calc() {
  console.log('calc clicked')
  let first = document.getElementById('one').value;
  let second = document.getElementById('two').value;
  let result = document.getElementById('result');
  console.log(typeof first) // test - returns a string - need to convert to number
  console.log(second)
  console.log(result)
  result.value = Number(first) + Number(second);
}
<input type='number' value='0' id='one'>
<input type='number' value='0' id='two'>
<input type='number' value='0' id='result'>
<input type="submit" value="Submit" onClick='calc()'>

推荐阅读