www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript website help

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    Javascript website help

    I'm having a really hard time with this JavaScript project for my computer science college class. I am making a website as a project. On the website, I am selling soda. The problem I am having is I cannot figure out how to correctly create the "total" equation. Here is the link to the webpage.

    http://uni.edu/fagleb/cs1000/sodashop.html

    As you can tell, when you click the buttons, then click total, the total is at $0.00. If anyone can help me with this it would be great!



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.ord/1999/xhtml">
    <head>
    <meta html-equiv="Content-Type" content="text/html;"
    charset=utf-8"/>
    <title>The Soda Shop</title></head>
    <style type="text/css">
    body {background-color : black;
    color : darkorange;
    font-family : helvetica; text-align: center}
    table {margin-left : auto; margin-right : auto; text-align : center;
    background-color : #993300; border-style : solid;
    border-color : firebrick;
    border-width : medium;
    padding : 8 px}


    </style>
    </head>
    <body>
    <script type = "text/javascript">
    var quanity =1;
    var flavor ="none";
    var ounce =0;
    </script>
    <h1 style="color : white"> The Soda Shop</h1>
    <hr style="width : 50%; color : darkorange"/>
    <p><b>figuring the price of sodas<br />
    because you know you want one</b></p>
    <form action="">

    <table>
    <tr>
    <td>
    <input type="button" value="1" onclick='quanity = 1'/>
    </td>
    <td>
    <input type="button" value="SMALL" onclick='ounce = 12'/>
    </td>
    <td>
    <input type="button" value=" COKE "
    onclick='flavor = "coke"'/>
    </td>
    <td>
    <input type="button" value="Clear" onclick=
    'quanity = 1;
    flavor = "none"
    ounce = 0;
    document.forms[0].price.value = "0.00"
    '/>
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" value="2" onclick='quanity = 2'/>
    </td>
    <td>
    <input type="button" value="MEDIUM" onclick='ounce = 20'/>
    </td>
    <td>
    <input type="button" value=" PEPSI "
    onclick='flavor = "pepsi"'/>
    </td>
    <td>
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" value="3" onclick='quanity = 3'/>

    </td>
    <td>
    <input type="button" value="LARGE" onclick='ounce = 32'/>
    </td>
    <td>
    <input type="button" value=" MOUNTAIN DEW "
    onclick='flavor = "mountain dew"'/>
    </td>
    <td>
    <input type="button" value="Total" onclick=
    'var price;
    var taxRate = 0.088;
    if (flavor == "coke") {
    if (ounce == 12)
    price = 1;
    if (ounce == 20)
    price = 1.85;
    if (ounce == 32)
    price = 2.50;
    if (flavor == "pepsi" || flavor == "mountian dew") {
    if (ounce == 12)
    price = .85;
    if (ounce == 20)
    price = 1.50;
    if (ounce == 32)
    price = 2.25;
    }
    if (flavor == "Dr. Pepper") {
    if (ounce == 12)
    price = .75;
    if (ounce == 20)
    price = 1.25;
    if (ounce == 32)
    price = 2;
    }
    price = price + (quanity) * 1.07;
    price = price + price * taxRate;
    document.forms[0].price.value=price;
    '/>
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" value="4" onclick='quanity = 4'/>
    </td>
    <td>
    </td>
    <td>
    <input type="button" value=" DR. PEPPER "
    onclick='flavor = "drpepper"'/>
    <td style="border-style : solid; border-width : medium;
    border-color : red">
    <input type="text" name="price" value="0.00" size="5"
    onchange=''/>
    </table>
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    588
    You have multiple coding errors. See them here: http://validator.w3.org/check?charse.../sodashop.html

    Don't forget that input values are usually strings (not numeric) and doing math with them will produce wildly exotic answers. Convert them to numeric first.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.ord/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
     <title>The Soda Shop</title></head>
     <style type="text/css">
     body {background-color:black;color:darkorange;font-family:Helvetica,Verdana;text-align:center;}
     table{margin-left:auto;margin-right:auto;text-align:center;background-color:#993300;border-style:solid;border-color:Firebrick;border-width:medium;padding:8px;}
     input{text-align:center;}
     input[type="button"]{cursor:pointer;}
     td.result{border-style:solid;border-width:medium;border-color:Red;}
     hr{width:50%;color:Darkorange;}
     h1{color:White;}
     </style>
     <script type="text/javascript">
     var quantity=1,
         flavor='',
         ounce='',
    	 drink={
    	 c   : [1,1.85,2.50],
    	 p   : [0.85,1.50,2.25],
    	 md  : [0.85,1.50,2.25],
    	 drp : [0.75,1.25,2]
    	 };
     
     function $(id){return document.getElementById(id);}
     
     onload=function(){
     /* quantity buttons onclicks */
     var i=1;
     while($('b'+i)!==null){
     $('b'+i).onclick=function(){quantity=this.value;}
     i++;
     }
     /* size buttons onclicks */
     $('s0').onclick=$('s1').onclick=$('s2').onclick=function(){
     ounce=parseInt(this.id.substr(1));
     }
     /* flavor buttons onclicks */
     $('fc').onclick=$('fp').onclick=$('fmd').onclick=$('fdrp').onclick=function(){
     flavor=this.id.substr(1);
     }
     /* clear form */
     $('clear').onclick=function(){
     quantity=1;flavor='';ounce='';
     document.forms[0].price.value="0.00";
     }
     /* total */
     $('total').onclick=function(){
     if(flavor==''){alert('Please, choose your flavor');return;}
     if(ounce==''){alert('Please, choose your size');return;}
     var taxRate=0.088,
         price=drink[flavor][ounce]*quantity*1.07;
     price=price+price*taxRate;
     document.forms[0].price.value=price.toFixed(2);
     }
     }
     </script>
     </head>
     <body>
     
     <h1>The Soda Shop</h1>
     <hr />
     <p><b>figuring the price of sodas<br />
     because you know you want one</b></p>
     <form action="">
     <table>
     <tr>
     <td><input id="b1" type="button" value="1"/></td>
     <td><input id="s0" type="button" value="SMALL" /></td>
     <td><input id="fc" type="button" value="COKE" /></td>
     <td><input id="clear" type="button" value="Clear" /></td>
     </tr>
     <tr>
     <td><input id="b2" type="button" value="2"/></td>
     <td><input id="s1" type="button" value="MEDIUM" /></td>
     <td><input id="fp" type="button" value=" PEPSI " /></td>
     <td>&nbsp;</td>
     </tr>
     <tr>
     <td><input id="b3" type="button" value="3" /></td>
     <td><input id="s2" type="button" value="LARGE" /></td>
     <td><input id="fmd" type="button" value="MOUNTAIN DEW" /></td>
     <td><input id="total" type="button" value="Total" /></td>
     </tr>
     <tr>
     <td><input id="b4" type="button" value="4" /></td>
     <td>&nbsp;</td>
     <td><input id="fdrp" type="button" value="DR. PEPPER" /></td>
     <td class="result"><input type="text" name="price" value="0.00" size="5" readonly="readonly" /></td>
     </table>
     </form>
     </body>
     </html>
    Last edited by Padonak; 04-24-2014 at 03:52 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    You need to convert your values to a type compatible for math calculations, otherwise you'll keep getting a total of NaN. You can save yourself some effort by re-writing your JavaScript and onClick statements to keep track of the amounts for you.


    HTML Code:
    <!-- in the <head> -->
    <script type = "text/javascript">
        int ounce = 0;
        function setOunce(x) {
             ounce += parseInt(x);
             return ounce;
        }
    </script>
    <!-- in the <body>  -->
    <input type = "button" value = "5" onClick = "setOunce(5)" />

  5. #5
    Join Date
    Oct 2013
    Posts
    383
    A different take. Partly because I believe buttons are ugly, and partly because they aren't very extensible. For example, if you needed to add a button for a "quanity" (good lord...) of 5 you'd have to add another table row. That messes with your layout, your script, etc. Anyway, adjust as necessary:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8"/>
    		<title>The Soda Shop</title>
    		<style>
    			body	{
    				background-color : black;
    				color : darkorange;
    				font-family : helvetica;
    				text-align: center;
    				}
    			table	{
    				margin : auto;
    				background-color : #993300;
    				border : solid firebrick medium;
    				padding : 8px;
    				}
    			hr	{
    				width : 50%;
    				color : white;
    				}		
    		</style>
    		<script>
    		function calc(q,c,f,p,t){
    			var	price = p.value,
    				size = c.value;
    			if (f.value == 'coke'){
    				switch (size){
    					case 's':
    						price = '1.00';
    						break;
    					case 'm':
    						price = '1.05';
    						break;
    					case 'l':
    						price = '1.10';
    						break;
    				}
    			}
    			if (f.value == 'pepsi'){
    				switch (size){
    					case 's':
    						price = '1.05';
    						break;
    					case 'm':
    						price = '1.10';
    						break;
    					case 'l':
    						price = '1.15';
    						break;
    				}
    			}
    			if (f.value == 'dew'){
    				switch (size){
    					case 's':
    						price = '1.10';
    						break;
    					case 'm':
    						price = '1.15';
    						break;
    					case 'l':
    						price = "1.20";
    						break;
    				}
    			}
    			if (f.value == 'pepper'){
    				switch (size){
    					case 's':
    						price = '1.15';
    						break;
    					case 'm':
    						price = '1.20';
    						break;
    					case 'l':
    						price = '1.25';
    						break;
    				}
    			}
    			var	taxRate = 0.07,
    				quantity = q.value,
    				sub = price*quantity,
    				subt = 1*sub+sub*taxRate,
    				total = t.innerHTML,
    				subTotal = 1*total+1*subt;
    			t.innerHTML = subTotal.toFixed(2);
    			
    		}
    		function zero(t){
    			t.innerHTML = "0.00";
    		}
    		</script>
    	</head>
    	<body>
    		<h1>The Soda Shop</h1>
    		<hr/>
    		<p><b>figuring the price of sodas<br />
    		because you know you want one</b></p>
    		<form action="">
    		<input type="hidden" id="price" value=""/>
    		
    		<table>
    		<thead>
    			<tr>
    				<th>Quantity</th>
    				<th>Size</th>
    				<th>Flavor</th>
    				<th>Total</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td><select id="quantity">
    					<option value="0">--</option>
    					<option value="1">1</option>
    					<option value="2">2</option>
    					<option value="3">3</option>
    					<option value="4">4</option>
    				</select></td>
    				<td><select id="cup">
    					<option value="">--</option>
    					<option value="s">Small</option>
    					<option value="m">Medium</option>
    					<option value="l">Large</option>
    				</select></td>
    				<td><select id="flavor">
    					<option value="">--</option>
    					<option value="coke">Coke</option>
    					<option value="pepsi">Pepsi</option>
    					<option value="dew">Mountain Dew</option>
    					<option value="pepper">Dr. Pepper</option>
    				</select></td>
    				<td>$<span id="total">0.00</span></td>
    			</tr>
    		</tbody>
    		<tfoot>
    			<tr>
    				<td colspan="4"><input type="reset" value="Clear" onclick="zero(total)"/> &nbsp; <input type="button" onclick="calc(quantity,cup,flavor,price,total)" value="Total"/></td>
    			</tr>
    		</tfoot>
    	</table>
    	</form>
    	</body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles