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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    No obvious errors in a pack calculator yet it still doesn't work

    This is a code for a simple calculator that requires the input of an Area and then calculates how many packs of product are then required to cover that area, rounding up to the next full pack, The results should be displayed in a simple HTML form but its not happening. I can't see any obvious errors. Am I missing something. Any help or ideas would be greatly appreciated. I might be making this more complicated than necessary. Thanks

    In the <HEAD>
    Code:
    <script>
    function packCalculation(){
    	
    	if ( document.getElementById('coverage').value == '' )
         {
                 alert('You must enter a number')
                 return false;
         }
    
    	var coverage = parseFloat(document.getElementById('coverage').value); //declare coverage variable-->
    	  
    	  if (isNaN(coverage)) 
    		{ 
             alert('Please only enter numbers')
    			return false;
    		};
    	var coverage = parseFloat(document.getElementById('coverage').value);
    
    	var packSize = parseFloat(document.getElementById('pack-size').innerHTML);
    
    	var price = parseFloat(document.getElementById('price').value);
    
    	var packNumFinal = coverage/packSize; <!--work out how many packs are needed-->
    
    	var finalPrice = packNumFinal*price;  <!--work out final price -->
    
    
    	document.getElementById('packsNeeded').innerHTML = packNumFinal.ceil(); <!--round up to the next full pack-->
    
    	document.getElementById('calcPrice').innerHTML = parseFloat(finalPrice).toFixed(2); <!--fix to 2 decimal points-->
    
    	document.getElementById('results').className='show';
    
    	return false;
    }
    </script>
    Then in the <BODY>
    Code:
    <form id="packC">
    <label>Enter Area to cover ( sq m ):</label> <input type="text" name="coverage" id="coverage" />
    
    <p><span>Pack Coverage (sq m):</span> <span id="pack-size">1.982</span></p>
    
    <input type="hidden" name="price" id="price" value="<?php echo $priceFormat; ?>" />
    
    <input type="button" value="Calculate" id="calculate"  onclick="packCalculation()"/>
    
    <!-- results -->
    
      <span class="packs">Packs:</span> <div id="packsNeeded"></div><br/>
      <span class="cost">Total:</span> <div id="calcPrice"></div>
     </form>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script>
    function packCalculation(){
    
    	if ( document.getElementById('coverage').value == '' ){
                 alert('You must enter a number')
                 return false;
         }
    
    	var coverage = parseFloat(document.getElementById('coverage').value); //declare coverage variable-->
    
    	  if (isNaN(coverage)){
             alert('Please only enter numbers')
    			return false;
    		};
    
    	var packSize = parseFloat(document.getElementById('pack-size').innerHTML);
    
    	var price = parseFloat(document.getElementById('price').value);
    
    	var packNumFinal = coverage/packSize; <!--work out how many packs are needed-->
    
    	var finalPrice = packNumFinal*price;  <!--work out final price -->
    
    
    	document.getElementById('packsNeeded').innerHTML = Math.ceil(coverage/packSize); <!--round up to the next full pack-->
    
    	document.getElementById('calcPrice').innerHTML = parseFloat(finalPrice).toFixed(2); <!--fix to 2 decimal points-->
    
    //	document.getElementById('results').className='show';
    
    	return false;
    }
    </script></head>
    
    <body>
    <form id="packC">
    <label>Enter Area to cover ( sq m ):</label> <input type="text" name="coverage" id="coverage" />
    
    <p><span>Pack Coverage (sq m):</span> <span id="pack-size">1.982</span></p>
    
    <input type="hidden" name="price" id="price" value="1.1" />
    
    <input type="button" value="Calculate" id="calculate"  onclick="packCalculation()"/>
    
    <!-- results -->
    
      <span class="packs">Packs:</span> <div id="packsNeeded"></div><br/>
      <span class="cost">Total:</span> <div id="calcPrice"></div>
     </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    woody1 (07-24-2011)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    There are indeed obvious errors. Try using your error console or Firebug to reveal them.

    You should not use a hyphen (really a minus sign) in an element id - pack-size should be packSize or pack_size.

    To round a number up -

    var x = 1.2345
    x = Math.ceil(x); // 2

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 07-23-2011 at 04:16 PM.

    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.

  • Users who have thanked Philip M for this post:

    woody1 (07-24-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you both very much indeed. Its all now up and running. Your efforts are very greatly appreciated.


  •  

    Posting Permissions

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