Javascript计算函数不计算

Question

我最近一直致力于一个导致无数小时挫折的项目。任务是创建一个网页，根据用户选择的不同单选按钮/复选框计算用户的总费用。

因此，假设我的所有其他函数和常量都是正确的，我的函数或调用函数是否有问题。

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;
}

Answer 1

请查看代码，只在评论中提出疑问。否则请提出一个新问题。

＆＃13;

＆＃13;

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

＆＃13;

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: "$";
}

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;