Javascript计算函数不计算

Javascript calculate function not calculating

本文关键字：计算 函数 Javascript      更新时间：2023-09-26

我最近一直在做一个项目，这个项目让我沮丧了无数个小时。任务是创建一个网页，根据用户选择的不同单选按钮/复选框计算用户的总成本。

那么，假设我所有的其他函数和常量都是正确的，我的函数或我的函数的调用有什么问题吗?

HTML 

   <input type = "button" value = "Submit" onclick="calculate();">
    <table>
      <tr><td>Workshop Total:</td>        <td><div id="divWorkshopTotal"></div></td></tr>
      <tr><td>Lodging Total:</td>         <td><div id="divLodgingTotal"></div></td></tr>
      <tr><td>Discount Amount:</td>       <td><div id="divDiscount"></div></td></tr>
      <tr><td>Sales Tax Amount:</td>      <td><div id="divSalesTaxAmount"></div></td></tr>  
      <tr><td>Total Due:</td>             <td><div id="divTotal"></div></td></tr>
    </table>
JavaScript 

 function $(elementName){
return document.getElementById(elementName);
}
function calculate(){
clearOutput();
if (checkWorkshopSelected() > 3){
    $("divWorkshopError").innerHTML = "* Selected workshops exceeds maximum of " + MAXIMUM_WORKSHOPS_SELECTED;
    return;
} else if (checkWorkshopSelected() == 0){
    $("divWorkshopError").innerHTML = "* No workshop(s) selected";
    return;
}
var workshopCost = calculateWorkshopTotalCost();
var lodgingCost =  calculateLodgingCost();
var subtotal =  workshopCost + lodgingCost;
var discountRate = calculateDiscountRate();
var discountAmount = subtotal * discountRate;
if ($("chkTaxExempt").checked == false){
    var salesTaxAmount = (subtotal - discountAmount) * SALES_TAX_RATE;
    }
var totalCost = subtotal - discountAmount + salesTaxAmount;
$("divWorkshopTotal").innerHTML = workshopCost;
$("divLodgingTotal").innerHTML = lodgingCost;
$("divDiscount").innerHTML = discountAmount;
$("divSalesTaxAmount").innerHTML = salesTaxAmount;
$("divTotal").innerHTML = totalCost;
}

请查看代码，在注释中只提出一些小疑问。否则，请重新提问。

var SALES_TAX_RATE = 0.1,
    MAXIMUM_WORKSHOPS_SELECTED = 3;
var data = {
  productA: 10,
  productB: 20,
  productC: 25,
};
var prod = document.getElementsByClassName('prod'),
    tax = $("tax"),
    workshopTotal = $("workshopTotal"),
    lodgingTotal = $("lodgingTotal"),
    discount = $("discount"),
    salesTaxAmount = $("salesTaxAmount"),
    total = $("total"),
    workshopError = $("workshopError"),
    out = document.getElementsByClassName('out');
$("inputButton").addEventListener("click", calculate);
clearOutput();
function $(elementName){
  return document.getElementById(elementName);
}
function calculate () {
  clearOutput();
  if (checkWorkshopSelected() >= MAXIMUM_WORKSHOPS_SELECTED) {
    workshopError.innerHTML = "* Selected workshops exceeds maximum of " + MAXIMUM_WORKSHOPS_SELECTED;
    return;
  } else if (checkWorkshopSelected() == 0) {
    workshopError.innerHTML = "* No workshop(s) selected";
    return;
  }
  var workshopCost = calculateWorkshopTotalCost();
  var lodgingCost =  calculateLodgingCost();
  var subtotal =  workshopCost + lodgingCost;
  var discountRate = calculateDiscountRate();
  var discountAmount = subtotal * discountRate;
  var salesTax = 0;
  if (tax.checked == false){
    salesTax = (subtotal - discountAmount) * SALES_TAX_RATE;
  }
  var totalCost = subtotal - discountAmount + salesTax;
  outputPrice(workshopTotal, workshopCost);
  outputPrice(lodgingTotal, lodgingCost);
  outputPrice(discount, discountAmount);
  outputPrice(salesTaxAmount, salesTax);
  outputPrice(total, totalCost);
}
function clearOutput () {
  for (var i=0; i<out.length; i++) {
    var o = out[i];
    o.innerHTML = "0,00"
  }
  workshopError.innerHTML = "";
}
function checkWorkshopSelected () {
  var s = 0;
  for (var i=0; i<prod.length; i++) {
    var p = prod[i];
    if (p.checked) s += 1;
  }
  return s;
}
function calculateLodgingCost () {
  return 5;
}
function calculateWorkshopTotalCost () {
  var t = 0;
  for (var i=0; i<prod.length; i++) {
    var p = prod[i];
    if (p.checked) t += data[p.id];
  }
  return t;
}
function calculateDiscountRate () {
  return 0.05;
}
function outputPrice (e, p) {
  e.innerHTML = p.toFixed(2);
}
p {
  line-height: 14px;
  width: 200px;
}
#inputButton {
  height: 32px;
  margin-bottom: 10px;
}
#workshopError {
  color: red;
  float: right;
  margin-bottom: 20px;
}
.prod + label {
  font-weight: bold;
}
.out {
  display: inline-block;
  padding: 4px 12px;
  margin: -6px 0;
  background: #fff;
  border: 1px solid #999;
  border-radius: 3px;
  font-family: monospace;
  float: right;
}
.out:before {
  content: "$";
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <p><input type="checkbox" id="productA" class="prod"><label>Workshop A - 10</label></p>
    <p><input type="checkbox" id="productB" class="prod"><label>Workshop B - 20</label></p>
    <p><input type="checkbox" id="productC" class="prod"><label>Workshop C - 25</label></p>
    <p><input type="checkbox" id="tax"><label>Tax 10%</label></p>
    <p><input id="inputButton" type="button" value="Submit"><label id="workshopError"></label></p>
    <p><label>Workshop Total:</label><span class="out" id="workshopTotal"></span></p>
    <p><label>Lodging Total:</label><span class="out" id="lodgingTotal"></span></p>
    <p><label>Discount Amount:</label><span class="out" id="discount"></span></p>
    <p><label>Sales Tax Amount:</label><span class="out" id="salesTaxAmount"></span></p>
    <p><label>Total Due:</label><span class="out" id="total"></span></p>
  </body>
</html>

相关文章：