Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Code for Java Script Cylinder / Cone Volume Calculator

By Stephen Bucaro

Note: Use the same measuring system units for all entries. In other words don't mix inches and feet or centimeters and meters. The output units will be cubic units of the same measuring system.

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 r² h.

The formula for the volume of a cone is (PI r² 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 />
</form>

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.