表单的 Javascript 函数不与文本内容一起显示

在我当前的代码中，我有一个包含 4 个输入数量的表单。输入后，用户将单击购买按钮，并且将根据用户之前输入的内容显示总数量:商品总数、小计、销售税、总金额和最终折扣金额。

我当前的问题是似乎没有打印任何内容。甚至连我的错误检查打印都没有。到目前为止，显示的只是购物车每个值的当前“0”值。

请帮助我了解我的问题所在。我担心 getElementsByClassId 也可能会导致 () 内的类出现我的问题。不完全确定从哪里开始。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title </title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Include jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
  thead { background-color: #333; color: #fff; font-weight: bold;  }
  .items, #nitems, #subtotal, #tax, #total, #final {text-align: right; width: 100px; }
  #checkout { margin-bottom: 45px; width: 200px; height: 50px; font-weight: bold; }
  #errors { padding-bottom: 200px; clear: both; font-weight: bold; clear: both; font-size: 20px;
  color: blue;
 }
</style>

</head>
<body class='container'>
<form name="testForm">
  <div class='row'>
  <div class='col-md-8'>
   <h2>Sam's Online Shop</h2>

   <h3>15% discount on all online sales </h3>

   <h3>Our World Famous Chocolates Now Available Online </h3>
     <table class='table'>
     <thead>
     <tr>
      <th>Product</th><th>Unit cost</th><th>Quantity</th>
     </tr>
     </thead>
     <tbody>
     <tr>
      <td id="ch-1-label">Milk Chocolate</td>
      <td id="ch-1-cost">7.48</td>
      <td><input size=3 name="milkchoc" id="ch-1-qnt" class="form-control items" value="0"></td>
     </tr>
     <tr>
      <td id="ch-2-label">Assorted Fine Chocolates</td>
      <td id="ch-2-cost">9.98</td>
      <td><input size=3 name="foil" id="ch-2-qnt" class="form-control items" value="0"></td>
     </tr>

     <tr>
      <td id="ch-3-label">Assorted Milk & Dark Chocolates</td>
      <td id="ch-3-cost">12.98</td>
      <td><input size=3 name="dc" id="ch-3-qnt" class="form-control items" value="0"></td>
     </tr>

     <tr>
      <td id="ch-4-label">Assorted Dessert Truffles</td>
      <td id="ch-4-cost">15.98</td>
      <td><input size=3 name="dt" id="ch-4-qnt" class="form-control items" value="0"></td>
     </tr>
     </tbody>
     </table>
 </div>
 </div>
 <div class='row'>
   <div class='col-md-4'>

  <h3>Shopping Cart </h3>
  <table class='table'>
    <tr>
      <td>Total Items</td>
      <td><span  id="nitems" >0</td>
    </tr>
    <tr>
      <td>Subtotal</td>
      <td><span  id="subtotal" >0</td>
    </tr>
    <tr>
      <td>5% Sales tax</td>
      <td><span id="tax" >0</td>
    </tr>
    <tr>
      <td>Total</td>
      <td><span id="total" >0</td>
    </tr>
    <tr>
      <td>Final amount (with 15% discount)</td>
      <td><span id="final"  >0</td>
    </tr>
   </table>



 <p><input type="button" value="Purchase" id="checkout" class="form-control btn btn-primary" /></p>
 <p><span id='errors'></span></p>
 </div>
 </div>

HTML 代码底部的 JavaScript 代码

 <script>
 // Include Javascript code here 

 document.getElementById('Purchase').onclick = function() {

var milk = document.getElementById('ch-1-qnt').value;
var fine = document.getElementById('ch-2-qnt').value;
var both = document.getElementById('ch-3-qnt').value;
var truff = document.getElementById('ch-4-qnt').value;
//Check for errors
var errors = checkErrors();
//Display the errors
if (errors.length > 0)
    //displayErrors(errors);
    checkErrors();
}
else {
    // Display function for total count of items purchased
    displayitems();
    // Return subTotal function that totals the initial cost for all
    var subTotal = Sub(milk, fine, both, truff);
    document.getElementByID('subtotal').textContent = subTotal;
    //Return Tax function totals
    var salesTax = Tax(subTotal);
    document.getElementById('tax').textContent = salesTax;
    // Return the total cost for Subtotal cost and salesTax cost
    var Total = displayTotal(subTotal, salesTax);
    document.getElementById('total').textContent = Total;
    // Display discount pricing
    var DiscountTotal = Total * .15;
    document.getElementById('final').textContent = DiscountTotal;
}

//Returns an array of error messages
function checkErrors() {
var list = [];

for (var j = 1; j<4; j++){

if (document.getElementById('ch-' + j + '-qnt')).value <0 ) {
    document.getElementById('errors').innerHTML = list;
    }   
}

}

// Display total item counts
function displayItems() {
var total = 0;
var input = document.getElementsByClassId('form-control items');
for (var i=0; i<input.length; i++){
    total += parseFloat(input[i].value);
}
document.getElementById('nitems').textContent = total;  
}

//Function to return the subtotal for all 4 inputs
function Sub(milk, fine, both, truff) {
var total1, total2, total3, total4 = 0;
var Final = 0;
var costMilk = 7.48;
var costFine = 9.98;
var costBoth = 12.98;
var costTruff = 15.98;

total1 = costMilk * milk;
total2 = costFine *fine;
total3 = costBoth * both;
total4 = costTruff * truff;

Final = total1 + total2 + total3 + total4;
return Final;
}

// Returns tax total
function Tax(subTotal) {

subTotal = Sub(milk, fine, both, truff);
var Tax = subTotal * .05;

return Tax;
}

function displayTotal(Tax, Sub){

return Tax * Sub;

}

};
</script>
</body>
</html>

最佳答案

您的脚本中有很多错误，错误列表是

document.getElementById('Purchase').onclick // using wrong id Purchase but checkout
if (errors.length > 0) //forgot closing brace {, but if (errors.length > 0){
displayitems(); //wrong function calling, but displayItems()
document.getElementsByClassId('form-control items'); //should be document.getElementsByClassName
(document.getElementById('ch-' + j + '-qnt').value) <0 ) //extra parenthesis ) after value, but (document.getElementById('ch-' + j + '-qnt').value <0 )

document.getElementById('checkout').onclick = function() {

var milk = document.getElementById('ch-1-qnt').value;
var fine = document.getElementById('ch-2-qnt').value;
var both = document.getElementById('ch-3-qnt').value;
var truff = document.getElementById('ch-4-qnt').value;
//Check for errors
var errors = checkErrors();
//Display the errors
if (errors.length > 0) {
    //displayErrors(errors);
    checkErrors();
}else {
    // Display function for total count of items purchased
    displayItems();
    // Return subTotal function that totals the initial cost for all
    var subTotal = Sub(milk, fine, both, truff);
    document.getElementById('subtotal').textContent = subTotal;
    //Return Tax function totals
    var salesTax = Tax(subTotal);
    document.getElementById('tax').textContent = salesTax;
    // Return the total cost for Subtotal cost and salesTax cost
    var Total = displayTotal(subTotal, salesTax);
    document.getElementById('total').textContent = Total;
    // Display discount pricing
    var DiscountTotal = Total * .15;
    document.getElementById('final').textContent = DiscountTotal;
}

//Returns an array of error messages
function checkErrors() {
var list = [];

for (var j = 1; j<4; j++){

if (document.getElementById('ch-' + j + '-qnt').value <0 ) {
    document.getElementById('errors').innerHTML = list;
    }   
}
return list;
}

// Display total item counts
function displayItems() {
var total = 0;
var input = document.getElementsByClassName('form-control items');
for (var i=0; i<input.length; i++){
    total += parseFloat(input[i].value);
}
document.getElementById('nitems').textContent = total;  
}

//Function to return the subtotal for all 4 inputs
function Sub(milk, fine, both, truff) {
var total1, total2, total3, total4 = 0;
var Final = 0;
var costMilk = 7.48;
var costFine = 9.98;
var costBoth = 12.98;
var costTruff = 15.98;

total1 = costMilk * milk;
total2 = costFine *fine;
total3 = costBoth * both;
total4 = costTruff * truff;

Final = total1 + total2 + total3 + total4;
return Final;
}

// Returns tax total
function Tax(subTotal) {

subTotal = Sub(milk, fine, both, truff);
var Tax = subTotal * .05;

return Tax;
}

function displayTotal(Tax, Sub){

return Tax * Sub;

}

};

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Include jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
  thead { background-color: #333; color: #fff; font-weight: bold;  }
  .items, #nitems, #subtotal, #tax, #total, #final {text-align: right; width: 100px; }
  #checkout { margin-bottom: 45px; width: 200px; height: 50px; font-weight: bold; }
  #errors { padding-bottom: 200px; clear: both; font-weight: bold; clear: both; font-size: 20px;
  color: blue;
 }
</style>

</head>
<body class='container'>
<form name="testForm">
  <div class='row'>
  <div class='col-md-8'>
   <h2>Sam's Online Shop</h2>

   <h3>15% discount on all online sales </h3>

   <h3>Our World Famous Chocolates Now Available Online </h3>
     <table class='table'>
     <thead>
     <tr>
      <th>Product</th><th>Unit cost</th><th>Quantity</th>
     </tr>
     </thead>
     <tbody>
     <tr>
      <td id="ch-1-label">Milk Chocolate</td>
      <td id="ch-1-cost">7.48</td>
      <td><input size=3 name="milkchoc" id="ch-1-qnt" class="form-control items" value="0"></td>
     </tr>
     <tr>
      <td id="ch-2-label">Assorted Fine Chocolates</td>
      <td id="ch-2-cost">9.98</td>
      <td><input size=3 name="foil" id="ch-2-qnt" class="form-control items" value="0"></td>
     </tr>

     <tr>
      <td id="ch-3-label">Assorted Milk & Dark Chocolates</td>
      <td id="ch-3-cost">12.98</td>
      <td><input size=3 name="dc" id="ch-3-qnt" class="form-control items" value="0"></td>
     </tr>

     <tr>
      <td id="ch-4-label">Assorted Dessert Truffles</td>
      <td id="ch-4-cost">15.98</td>
      <td><input size=3 name="dt" id="ch-4-qnt" class="form-control items" value="0"></td>
     </tr>
     </tbody>
     </table>
 </div>
 </div>
 <div class='row'>
   <div class='col-md-4'>

  <h3>Shopping Cart </h3>
  <table class='table'>
    <tr>
      <td>Total Items</td>
      <td><span  id="nitems" >0</td>
    </tr>
    <tr>
      <td>Subtotal</td>
      <td><span  id="subtotal" >0</td>
    </tr>
    <tr>
      <td>5% Sales tax</td>
      <td><span id="tax" >0</td>
    </tr>
    <tr>
      <td>Total</td>
      <td><span id="total" >0</td>
    </tr>
    <tr>
      <td>Final amount (with 15% discount)</td>
      <td><span id="final"  >0</td>
	   </tr>
   </table>



 <p><input type="button" value="Purchase" id="checkout" class="form-control btn btn-primary" /></p>
 <p><span id='errors'></span></p>
 </div>
 </div>

关于表单的 Javascript 函数不与文本内容一起显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28511670/

表单的 Javascript 函数不与文本内容一起显示

上一篇：javascript - 由于额外的 $$hashKey，angularjs 函数失败

下一篇：javascript - html:如何将上传文件格式限制为纯文本