Question

当我点击计算按钮时，总计不会显示，我不知道为什么。它应该添加所有数量的票据字段并显示总金额。相反，当我点击“计算”按钮时没有任何反应。有任何想法吗？ JavsScript

// JavaScript Document
$(document).ready(function () {

$('#logo1').animate({
        marginLeft: "350px"
    }, 2000);


});
function displayTotal(){

var beforenoonprice = 6.00; // CHANGE THE PRICE OF THE BEFORE NOON TICKET
var matineeprice = 8.50; // CHANGE THE PRICE OF THE MATINEE TICKET
var seniorprice = 9.50; // CHANGE THE PRICE OF THE SENIOR TICKET
var militaryprice = 9.00; // CHANGE THE PRICE OF THE MILITARY TICKET
var studentdayprice = 7.50; // CHANGE THE PRICE OF THE STUDENT DAY TICKET
var seniordayprice = 6.00; // CHANGE THE PRICE OF THE SENIOR DAY TICKET
var adultprice = 10.50; // CHANGE THE PRICE OF THE ADULT TICKET
var childprice = 7.50; // CHANGE THE PRICE OF THE CHILD TICKET
var threeDprice = 3.50; // CHANGE THE PRICE OF THE REGULAR 3D PRICE
var imaxPrice = 4.50; // CHANGE THE PRICE OF THE IMAX TICKET
var imax3dPrice = 5.50; // CHANGE THE PRICE OF THE IMAX 3D TICKET

//PRICE CHANGE EDIT ENDS HERE


var beforenoon = Number(document.getElementById('beforeNoon').value) || 0;
var beforenooncost = beforenoon * beforenoonprice;
var matinee = Number(document.getElementById('matinee').value) || 0;
var matineecost = matinee * matineeprice;
var senior = Number(document.getElementById('seniorTicket').value) || 0;
var seniorcost = senior * seniorprice;
var Military = Number(document.getElementById('militaryTicket').value) || 0;
var militarycost = Military * militaryprice;
var StudentDay = Number(document.getElementById('studentdayTicket').value) || 0;
var studentdaycost = StudentDay * studentdayprice;
var seniorDay = Number(document.getElementById('seniordayTicket').value) || 0;
var seniordaycost = seniorDay * seniordayprice;
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var adultcost = Adult * adultprice
var child = Number(document.getElementById('childTicket').value) || 0;
var childcost = child * childprice;
var threeD = Number(document.getElementById('threed').value) || 0;
var threeDcost = threeD * threeDprice;
var Imax = Number(document.getElementById('imax').value) || 0;
var imaxCost = Imax * imaxPrice;
var Imax3d = Number(document.getElementById('imax3d').value) || 0;

var imax3dCost = Imax3d * imax3dPrice;

var total =   childcost+adultcost+militarycost+seniorcost+studentdaycost+seniordaycost+threeDcost+imaxCost+imax3dCost+beforenooncost+matineecost;

document.getElementById('calculate').innerHTML = total.toFixed(2);

}

HTML

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="amc.css">


<meta charset="utf-8">
<title>Ticket Calculator</title>
</head>

<body>

<div id="logo1"><img src="logo1.png" width="822" height="59"  alt=""/></div>
<div id="outline">
<div id="quantityLabel">Please enter the quantity of each ticket</div>
<div id="ticketFields">
<div class="controls controls-row">

 <input type="text" id="beforeNoon" class="input-small" placeholder="Before Noon"><br>
 <input type="text" id="matinee" class="input-small" placeholder="Matinee"><br>
<input type="text" id="adultTicket" class="input-small" placeholder="Adult"><br>
   <input type="text" id="childTicket" class="input-small" placeholder="Child"><br>
   <input type="text" id="seniorTicket" class="input-small" placeholder="Senior"><br>
   <input type="text" id="military" class="input-small" placeholder="Military"><br>
 <input type="text" id="seniorDayTicket" class="input-small" placeholder="Senior Day"><br>
 <input type="text" id="studentDayTicket" class="input-small" placeholder="Student Day">
  <div id="pricingStructure">
 <div id="beforeNoonPrice">$6.75</div>
<div id="matineePrice">$9.00</div>
<div id="adultPrice">$10.75</div>
<div id="childPrice">$8.00</div>
<div id="seniorPrice">$9.25</div>
<div id="militaryPrice">$9.25</div>
<div id="seniorDayPrice">$6.75</div>
<div id="studentDayPrice">$8.00</div>
</div><br>


  <br>
<div id="additionalInfo">
<div id="please2">Please enter additional information if needed</div>
 <input type="text" id="threed" class="input-small" ><div id="reg3d">How many tickets are regular<b>     3D?</b>&nbsp;&nbsp;($3.50 additional charge per ticket)</div>
 <input class="input-small" id="imax" type="text" ><div id="imaxLabel">How many tickets are      <b>IMAX(NO 3D)?</b>&nbsp;&nbsp;($4.50 additional charge per
ticket)</div>
  <input class="input-small" id="imax3dField" type="text" ><div id="imax3d">How many tickets are     <b>IMAX 3D?</b>&nbsp;&nbsp;($5.50 additional charge per ticket)</div><br>

  <button type="button" id="calculateButton"  onClick="displayTotal()"  class="btn btn-success btn-lg">Calculate</button>
   <button type="button" id="clearButton" class="btn btn-danger btn-lg"      onClick="window.location.reload()">Clear</button>
   <div id="calculate">


  <br>


 </div>
 <div id="totalCalculated">Ticket Total: $ </div>
 </div>

 </div>

</div>


<script type="text/javascript" src="jQuery.min.js"></script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="amc.js"></script>
</div>

</body>

Answer 1

一种解决方案是不要将纯JS与jQuery混合使用。例如，从计算按钮中删除onClick="displayTotal()"，而不是使用此jQuery代码段：

$('#calculateButton').click(function() { displayTotal(); });

可以对displayTotal函数进行大量错误和修复，这是我使用jQuery创建的一个解决方案：http://jsfiddle.net/P7Lxs/13/

JavaScript计算器不显示总计

1 个答案: