Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Code for Java Script Cylinder / Cone Volume Calculator

 Cylinder / Cone
Volume Calculator
  Cylinder Cone  
Volume:cubic units

In this article I'll show you how to use to Java Script to create a cylinder / cone volume calculator. With this calculator, the user inputs the side dimension of a cylinder or cone, and the diameter of the end of the cylinder or cone, and the calculator will return the volume. I'll explain everything in detail so that you can learn Java Script and modify the code for your own purposes.

I have programmed many Java Script calculators and discovered that, the process of coding any calculator can be broken down into a step-by-step procedure. Shown below are the steps to build a calculator.

1. Acquire the formula
2. Determine the inputs and outputs
3. Design the html form
4. Write Java Script to process the form
5. Test and Final Touches

Step 1: Cylinder and Cone Volume Formulas

The formula for the volume of a cylinder is PI r2 h.

The formula for the volume of a cone is (PI r2 h) / 3.

Step 2. The inputs and outputs

For a cylinder the user needs to enter the length of the side and the diameter of one of the end circles. By default the cylinder / cone selection radio button is set to cylinder. If the user wants the volume of a cone, they need to enter the length of the side and the diameter of the end circle, then set the cylinder / cone selection radio button is set to cone.

Note that the formula uses the radius of the end circle, while we have the user enter the diameter. This is because it's easier for the user to measure a diameter than a radius, so the calculator divides the user's diameter entry by 2 to get the radius.

The actual units of measurement are irrelevant in a volume calculator because sides are always in length units while the volume is in cubic units of the same measuring system.

Step 3. The html Form

The html code for the cylinder / cone volume calculator form consists of an input text box for the height dimension, a text box for the diameter, a pair of radio buttons to select cylinder or cone, a text box for the calculated volume, and a "Calculate" button to initiate the calculation. The html code for the cylinder / cone volume calculator form is shown below.

<form action="javascript:return false;">
Height:<input id="h" style="text-align:right"></input><br />
Diameter:<input id="d" style="text-align:right"></input><br />
<input type="radio" name="shape" value="cylinder" checked />Cylinder<br />
<input type="radio" name="shape" value="cone" />Cone<br />
Volume:<input id="cv" style="text-align:right"></input><br />
<button onclick="cylinderVolume(this.form)">Calculate</button><br />

Note that all the text box html elements have id attributes with unique ids, and they also have style attributes that set their text-align properties to the value right. Also note that the onclick event of the button calls a Java Script function named cylinderVolume to perform the calculation, passing the form as a parameter. Also note that the action attribute of the form tag is set to javascript:return false;, this is to prevent the form from being submitted to the server.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268