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計算器不顯示總計

回答

相關問題