When I click calculate now, a prompt is supposed to come up but nothing happens and I can't figure out where the error in my code is. Any suggestions is appreciated.
Code:
<html>
<head>
<title>AMC Ticket Calculator</title>
<style type="text/css">
#welcome{color:red;font-size:35px;font-family:impact;}
body{border-style:solid;overflow:hidden;border-color:red;
border-width:20px;}
#please{font-size:20px;color:red;font-weight:bold;}
#please1{font-size:20px;color:red;font-weight:bold;}
#please2{font-size:20px;color:red;font-weight:bold;}
#logo
{
float:right;margin-top:-45px;margin-right:200px;
}
#info
{
font-weight:bold;
margin-top:10px;
font-size:15px;
}
#clear{
margin-top:240px;
}
#calculate{
border-style:solid;border-color:red;width:300px;height:300px;float:right;margin-top:-480px;text-align:center;color:red;font-weight:bold;font-size:20px;}
</style>
</head>
<body>
<center><div id="welcome">Welcome to the <img src
="https://si0.twimg.com/profile_images/2391543757/ar8n1bu3oc6mo4am5ef1_normal.jpeg" alt="logo"/>Ticket Calculator</div></center>
<form>
<center>
<div id="please">Please enter what time frame the movie is in:</div>
<input Id="beforenoon" type="radio" name="showtype"
value="beforenoon">Before 12 P.M.<br>
<input Id="twelvetofour" type="radio" name="showtype"
value="twelvetofour">Between 12 P.M. and 4 P.M.<br>
<input Id="afterfour" type="radio" name="showtype"
value="afterfour">After 4 P.M.<br><br>
<div id="please1">Please enter the quantity of each ticket</div>
Please leave blank any that do not apply<br>
Adult:<input Id="adult" type="text" size="1" name="adult" ><br>
Child:<input Id="child" type="text" size="1" name="child" ><br>
Senior:<input Id="senior" type="text" size="1" name="senior" ><br>
Military:<input Id="military" type="text" size="1" name="military" ><br>
Senior Day Ticket:<input Id="seniorday" type="text" size="1"
name="seniorday" ><br>
Student Day Ticket:<input Id="studentday" type="text" size="1"
name="studentday" ><br>
<br>
<div id="please2">Please enter additional information if needed</div>
How many tickets are regular<b>3D?</b><input Id="threed"
type="text" size="1" name="quantity" >($3.50 additio
nal charge per
ticket)<br>
How many tickets are <b>IMAX(NO 3D)?</b><input Id="imax"
type="text" size="1" name="quantity" >($4.50 additional charge per
ticket)<br>
How many tickets are <b>IMAX 3D?</b><input Id="imax3d" type="text"
size="1" name="quantity" >($5.50 additional charge per ticket)<br>
<script type="text/javascript">
function displayTotal(){
var adult = document.getElementbyId('adult');
var child = document.getElementbyId('child');
var senior = document.getElementbyId('senior');
var military = document.getElementbyId('military');
var seniorday = document.getElementbyId('seniorday');
var studentday = document.getElementbyId('studentday');
var total = adult + child + senior + military + seniorday + studentday;
prompt("The total is " + total);
}
</script>
<br>
<input type="button" onClick="displayTotal()" value="Calculate Now!">
</center>
</form>
<div id="calculate">
Total Breakdown
<br>
<div id="info">Ticket Type Quantity Price</div>
<div id="clear"><input type="button" value="Clear Everything and Start Over" onClick="document.location.reload(true)">
</div>
</div>
</div>
</body>
</html>
You're trying to add objects, not the value of the objects.
var adult = document.getElementById('adult').value;
Also, + in JS means "concatenate" unless you indicate that it needs to be math.
parseFloat(adult + child + senior... );
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
Place the <script> tag and contents just before the closing </body> tag. Also, check your error console to see if there are any messages.
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
I moved the <script> and its contents and I went into error console in chrome but it's blank. I wasn't sure if I looked in the right place for the console so I took a screenshot in the image below of where I was.
I moved the <script> and its contents and I went into error console in chrome but it's blank. I wasn't sure if I looked in the right place for the console so I took a screenshot in the image below of where I was.
A screenshot is no use whatsoever. Use your browser error console (F12).
You persistently use Id instead of id - Javascript is case sensitive. Id is meaningless to Javascript.
You also persistently use document.getElementbyId - again, Javascript is case sensitive.
onClick should be onclick.
You also use the same id for HTML elements and Javascript variables. Very unwise.
Use Number() to convert the string values entered by the user:-
var Adult = Number(document.getElementbyId('adult').value); // Javascript is case sensitive so Adult is not the same as adult
// etc.
var total = parseFloat(adult + child + senior + military + seniorday + studentday); // concatenates the 6 string values and converts to a real number. Use Number() to make the individual values numbers, and remove parseFloat(). In any case the number of tickets must be an integer, so parseFloat() makes no sense.
You have not specified the width and height of your image.
You have assigned the same name quantity to multiple variables.
May be other errors as well.
My advice would be to strip your code down to just one element to start with, test that and get it working before moving on.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Last edited by Philip M; 01-23-2013 at 07:32 PM..
Reason: Noticed typo
function displayTotal(){
var adult = document.getElementById('adult').value == "" ? 0 : parseFloat(document.getElementById('adult').value) ;
if(isNaN(adult)) { adult = 0; }
... // use the above as a template for the rest
var total = parseFloat(adult + child + senior + military + seniorday + studentday);
alert("The total is " + total);
}
I did not pay attention to the IDs and whatnot that Philip M did. But JS _is_ case sensitive, so getElementbyId won't work, it has to be getElementById.
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
function displayTotal(){
var adult = document.getElementById('adult').value == "" ? 0 : parseFloat(document.getElementById('adult').value) ;
if(isNaN(adult)) { adult = 0; }
... // use the above as a template for the rest
var total = parseFloat(adult + child + senior + military + seniorday + studentday);
alert("The total is " + total);
}
I did not pay attention to the IDs and whatnot that Philip M did. But JS _is_ case sensitive, so getElementbyId won't work, it has to be getElementById.
That is not the way to do it. Use Number(). To trap NaN entries use
var Adult = Number(document.getElementById('adult').value) || 0;
// and so on
parseFloat() is not required.
Code:
function displayTotal(){
var Adult = Number(document.getElementById('adult').value) || 0;
var Child = Number(document.getElementById('child').value) || 0;
var Senior = Number(document.getElementById('senior').value) || 0;
var Military = Number(document.getElementById('military').value) || 0;
var Seniorday = Number(document.getElementById('seniorday').value) || 0;
var Studentday = Number(document.getElementById('studentday').value) || 0;
var total = (Adult + Child + Senior + Military + Seniorday + Studentday);
alert ("The total is " + total);
}
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Ok I changed a bunch of stuff and I got the prompt working as well but when I add a 2 in a textbox and a 3 in another. It outputs 23 not 5??? Also how would I hardcode each ticket with a certain price like for example adult price is $10.50. So when I enter a 4 for quantity it multiplies 10.50 with 4 and outputs its?
Code:
<html>
<head>
<title>AMC Ticket Calculator</title>
<style type="text/css">
#welcome{color:red;font-size:35px;font-family:impact;}
body{border-style:solid;overflow:hidden;border-color:red;
border-width:20px;}
#please{font-size:20px;color:red;font-weight:bold;}
#please1{font-size:20px;color:red;font-weight:bold;}
#please2{font-size:20px;color:red;font-weight:bold;}
#logo
{
float:right;margin-top:-45px;margin-right:200px;
}
#breakdown{color:black;font-family:impact;}
#info
{
font-weight:bold;
margin-top:10px;
font-size:15px;
}
#ticketType{margin-left:30px;float:left;font-size:25px;}
#qty{margin-top:11px;font-size:25px;margin-right:110px;}
#price{margin-right:30px;float:right;font-size:25px;margin-top:-28px;}
#additionalCharge
{
position:relative;left:20px;
}
#clear{
margin-top:330px;
}
#calculate{
border-style:solid;border-color:red;width:600px;height:450px;float:right;margin-top:-470px;margin-right:20px;text-align:center;color:red;font-weight:bold;font-size:35px;}
</style>
</head>
<body>
<center><div id="welcome">Welcome to the <img src
="https://si0.twimg.com/profile_images/2391543757/ar8n1bu3oc6mo4am5ef1_normal.jpeg" alt="logo"/>Ticket Calculator</div></center>
<form>
<div id="please">Please enter what time frame the movie is in:</div>
<input Id="beforenoon" type="radio" name="showtype"
value="beforenoon">Before 12 P.M.<br>
<input Id="twelvetofour" type="radio" name="showtype"
value="twelvetofour">Between 12 P.M. and 4 P.M.<br>
<input Id="afterfour" type="radio" name="showtype"
value="afterfour">After 4 P.M.<br><br>
<div id="please1">Please enter the quantity of each ticket</div>
Please leave blank any that do not apply<br>
<input Id="adult" type="text" size="1" name="adult" >Adult<br>
<input Id="child" type="text" size="1" name="child" >Child<br>
<input Id="senior" type="text" size="1" name="senior" >Senior<br>
<input Id="military" type="text" size="1" name="military" >Military<br>
<input Id="seniorday" type="text" size="1"
name="seniorday" >Senior Day Ticket<br>
<input Id="studentday" type="text" size="1"
name="studentday" >Student Day Ticket<br>
<br>
<div id="please2">Please enter additional information if needed</div>
<input Id="threed"
type="text" size="1" name="quantity" >How many tickets are regular<b> 3D?</b>($3.50 additional charge perticket)<br>
<input Id="imax"type="text" size="1" name="quantity" >How many tickets are <b>IMAX(NO 3D)?</b>($4.50 additional charge per
ticket)<br>
<input Id="imax3d" type="text"
size="1" name="quantity" >How many tickets are <b>IMAX 3D?</b>($5.50 additional charge per ticket)<br>
<br>
<input type="button" onclick="displayTotal()" value="Calculate Now!">
</form>
<div id="calculate">
<div id="breakdown">
Total Breakdown
</div>
<br>
<div id="info"><div id="ticketType">Ticket Type</div><div id="qty">Quantity</div><div id="price">Price</div></div>
<div id="clear"><input type="button" value="Clear Everything and Start Over" onclick="document.location.reload(true)">
</div>
</div>
</div>
<script type="text/javascript">
function displayTotal(){
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var Child = Number(document.getElementById('childTicket').value) || 0;
var Senior = Number(document.getElementById('seniorTicket').value) || 0;
var Military = Number(document.getElementById('militaryTicket').value) || 0;
var Seniorday = Number(document.getElementById('seniordayTicket').value) || 0;
var Studentday = Number(document.getElementById('studentdayTicket').value) || 0;
var total = (Adult + Child + Senior + Military + Seniorday + Studentday);
alert ("The total is " + total);
}
</script>
</body>
</html>
Last edited by andynov123; 01-23-2013 at 09:18 PM..
You changed all of the getElements to name'Ticket' without changing the corresponding input names/ids.
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
If the error console isn't giving you enough information about what is wrong and you can't figure out how to use the debugger (or are using Firefox and haven't installed one) then use alert() confirm() or prompt() to display values at various points so you can follow the code execution - that's what those dialogs are for.
One more time: You changed all of the getElements to name'Ticket' without changing the corresponding input names/ids.
input Id="adult"
If you used Number() as I advised then 2+3 comes to 5, not 23 which is two string values concatenated. I don't think that the code you posted here is the same code as you are using to test.
To multiply the number of tickets by price simply do
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var aduitprice = 10.50; // (no $ sign!!)
var adultcost = Adult * adultprice;
If desired add a $ sign to the total at the end before displaying the result.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
One more time: You changed all of the getElements to name'Ticket' without changing the corresponding input names/ids.
input Id="adult"
If you used Number() as I advised then 2+3 comes to 5, not 23 which is two string values concatenated. I don't think that the code you posted here is the same code as you are using to test.
To multiply the number of tickets by price simply do
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var aduitprice = 10.50; // (no $ sign!!)
var adultcost = Adult * adultprice;
If desired add a $ sign to the total at the end before displaying the result.
I think I fixed everything you are talking about but something is now keeping my calculate now button from working. Nothing appears.
Code:
<html>
<head>
<title>AMC Ticket Calculator</title>
<style type="text/css">
#welcome{color:red;font-size:35px;font-family:impact;}
body{border-style:solid;overflow:hidden;border-color:red;
border-width:20px;}
#please{font-size:20px;color:red;font-weight:bold;}
#please1{font-size:20px;color:red;font-weight:bold;}
#please2{font-size:20px;color:red;font-weight:bold;}
#logo
{
float:right;margin-top:-45px;margin-right:200px;
}
#info
{
font-weight:bold;
margin-top:10px;
font-size:15px;
}
#ticketType{margin-left:30px;float:left;font-size:25px;}
#qty{margin-top:11px;font-size:25px;margin-right:110px;}
#price{margin-right:30px;float:right;font-size:25px;margin-top:-28px;}
#additionalCharge
{
position:relative;left:20px;
}
#clear{
margin-top:330px;
}
#calculate{
border-style:solid;border-color:red;width:600px;height:450px;float:right;margin-top:-470px;margin-right:20px;text-align:center;color:red;font-weight:bold;font-size:35px;}
</style>
</head>
<body>
<center><div id="welcome">Welcome to the <img src
="https://si0.twimg.com/profile_images/2391543757/ar8n1bu3oc6mo4am5ef1_normal.jpeg" alt="logo"/>Ticket Calculator</div></center>
<form>
<div id="please">Please enter what time frame the movie is in:</div>
<input Id="beforenoon" type="radio" name="showtype"
value="beforenoon">Before 12 P.M.<br>
<input Id="twelvetofour" type="radio" name="showtype"
value="twelvetofour">Between 12 P.M. and 4 P.M.<br>
<input Id="afterfour" type="radio" name="showtype"
value="afterfour">After 4 P.M.<br><br>
<div id="please1">Please enter the quantity of each ticket</div>
Please leave blank any that do not apply<br>
<input Id="adultTicket" type="text" size="1" name="adult" >Adult<br>
<input Id="childTicket" type="text" size="1" name="child" >Child<br>
<input Id="seniorTicket" type="text" size="1" name="senior" >Senior<br>
<input Id="militaryTicket" type="text" size="1" name="military" >Military<br>
<input Id="seniordayTicket" type="text" size="1"
name="seniorday" >Senior Day Ticket<br>
<input Id="studentdayTicket" type="text" size="1"
name="studentday" >Student Day Ticket<br>
<br>
<div id="please2">Please enter additional information if needed</div>
<input Id="threed"
type="text" size="1" name="quantity" >How many tickets are regular<b> 3D?</b>($3.50 additional charge perticket)<br>
<input Id="imax"type="text" size="1" name="quantity" >How many tickets are <b>IMAX(NO 3D)?</b>($4.50 additional charge per
ticket)<br>
<input Id="imax3d" type="text"
size="1" name="quantity" >How many tickets are <b>IMAX 3D?</b>($5.50 additional charge per ticket)<br>
<br>
<input type="button" onclick="displayTotal()" value="Calculate Now!">
</form>
<div id="calculate">
Total Breakdown
<br>
<div id="info"><div id="ticketType">Ticket Type</div><div id="qty">Quantity</div><div id="price">Price</div></div>
<div id="clear"><input type="button" value="Clear Everything and Start Over" onclick="document.location.reload(true)">
</div>
</div>
</div>
<script type="text/javascript">
function displayTotal(){
var senior = document.getElementById('seniorTicket').value;
var military = document.getElementById('militaryTicket').value;
var senior = Number(document.getElementById('seniorTicket').value) || 0;
var seniorprice = 9.50; // (no $ sign!!)
var seniorcost = Senior * seniorPrice;
var Military = Number(document.getElementById('militaryTicket').value) || 0;
var militaryprice = 9.00; // (no $ sign!!)
var militarycost = Military * militaryprice;
var StudentDay = Number(document.getElementById('studentDayTicket').value) || 0;
var studentdayprice = 7.50; // (no $ sign!!)
var studentdaycost = StudentDay * studentdayprice;
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var aduitprice = 10.50; // (no $ sign!!)
var adultcost = Adult * adultprice;
var Child = Number(document.getElementById('childTicket').value) || 0;
var childprice = 7.50; // (no $ sign!!)
var childcost = child * childprice;
var total = childcost+adultcost;
prompt("The total is " + total);
}
</script>
</body>
</html>
Before you post, read our: 
