Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19
  1. #16
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,370 Times in 4,335 Posts
    I don't think you have yet learned how to use the error console.

    Which browser are you using?

    I personally prefer Chrome. It will show you your errors even if you turn on the debugger after you have started using the page.

    Do this:
    -- Bring up that page in Chrome
    -- Hit the F12 key to bring up the debugger.
    -- Click on the CONSOLE tag in the debugger
    -- Without entering *ANY* data into your form, hit the Calculate Now! button
    -- Look at the console section. It should say (with "filename" replaced with your actual name):
    Uncaught ReferenceError: Senior is not defined filename.html:119
    -- Click on the "119" there.
    -- The JavaScript code at line 119 (and a few lines around that) shows with the error clear.
    Code:
    var senior = Number(document.getElementById('seniorTicket').value) || 0;
    var seniorprice = 9.50; // (no $ sign!!)
    var seniorcost = Senior * seniorPrice;
    Senior is *NOT* the same as senior.

    JavaScript can't find any variable named Senior so *KABLOOEY*.

    Fix that error. Hit REFRESH. Hit "Calculate Now!" again.

    See your next error.

    Keep at it. There are several.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  2. #17
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,370 Times in 4,335 Posts
    There are several other things I find wrong.

    Just for starters, there is NO REASON to assign ID's to any or you <form> fields.

    Names are all that are needed.

    And if you use names, you don't need to keep using document.getElementById.

    Plus, if you were to later send this <form> to server-side code, only the names would matter, anyway.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  3. #18
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    Thanks Old Pedant for the error console instructions. I got it working. I just have a couple questions.
    -How do I change the output from looking like this for 2 adult tickets
    output = 21
    output I want to see = 21.00

    -How do I get this output to appear inside the info border on the right instead of as a prompt?



    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;	
    }
    #qty{margin-left:30px;float:left;font-size:25px;margin-top:-30px;}
    #tickettype{margin-top:11px;font-size:25px;margin-right:0px;}
    #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-right:20px;text-align:center;color:red;position:relative;bottom:380px;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="please1">Please enter the quantity of each ticket</div>
    Please leave blank any that do not apply<br>
    
    
    <input Id="beforeNoon" type="text" size="1" name="beforeNoon" >Before Noon<br>
    <input Id="matinee" type="text" size="1" name="matinee" >Matinee<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>
    <script type="text/javascript">
    displayTotal();
    </script>
    <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 beforenoon = Number(document.getElementById('beforeNoon').value) || 0;
    var beforenoonprice = 6.00; // (no $ sign!!)
    var beforenooncost = beforenoon * beforenoonprice;
    var matinee = Number(document.getElementById('matinee').value) || 0;
    var matineeprice = 8.50; // (no $ sign!!)
    var matineecost = matinee * matineeprice;
    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 seniorDay = Number(document.getElementById('seniordayTicket').value) || 0;
    var seniordayprice = 6.00; // (no $ sign!!)
    var seniordaycost = seniorDay * seniordayprice;
    var Adult = Number(document.getElementById('adultTicket').value) || 0;
    var adultprice = 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 threeD = Number(document.getElementById('threed').value) || 0;
    var threeDprice = 3.50; // (no $ sign!!)
    var threeDcost = threeD * threeDprice;
    var Imax = Number(document.getElementById('imax').value) || 0;
    var imaxPrice = 4.50; // (no $ sign!!)
    var imaxCost = Imax * imaxPrice;
    var Imax3d = Number(document.getElementById('imax3d').value) || 0;
    var imax3dPrice = 5.50; // (no $ sign!!)
    var imax3dCost = Imax3d * imax3dPrice;
    var total = childcost+adultcost+militarycost+seniorcost+studentdaycost+seniordaycost+threeDcost+imaxCost+imax3dCost+beforenooncost+matineecost;
    prompt("The total is $" + total);
    }
    
    
    </script>
    </body>
    
    
    
    </html>
    Last edited by andynov123; 01-26-2013 at 05:57 PM.

  4. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,370 Times in 4,335 Posts
    prompt("The total is $" + total.toFixed(2));

    -How do I get this output to appear inside the info border on the right instead of as a prompt?
    Put it there.

    Create a <div> or <span> with an ID of your choice an put the total into the element's innerHTML.

    Oh, what the heck:
    Code:
    <div id="totalHere"></div>
    ...
    document.getElementById("totalHere").innerHTML = The total is $" + total.toFixed(2);
    Then you can use CSS to position the <div> (or <span>) where you want it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •