JavaScript计算器不显示总计

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

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

来源

2014-07-14 user3814247

检查浏览器控制台是否有错误？另外，如果你使用jQuery，那么使用jQuery。例如'document.getElementById（'seniordayTicket'）.value'应该是'$（'＃seniordayTicket'）.val（）'。 – j08691

谢谢。这实际上帮助我弄清楚了。 – user3814247

所有这些Number（）|| 0或条件无所作为。由于'seniordayprice'不存在，'''Number's * always *评估为布尔真值（甚至'0'） – blgt

-1

一种解决方案是不使用jQuery混合纯JS。例如，删除从计算按钮的onClick="displayTotal()"，而是使用jQuery的片段：

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

有很多错误和修正的，可以给你的displayTotal功能进行，这里是一个解决方案，我用发jQuery：http://jsfiddle.net/P7Lxs/13/

来源

2014-07-14 21:08:20

JavaScript计算器不显示总计

回答

相关问题