Uncle Jim's Web Designs
Javascript Conversion Utility
Author: Jim Stiles

Directions: Type a known value into the left column. Then click anywhere outside the cell you just filled. The answer will appear in the column to the right. JavaScript Programmers see below.

Length (feet, meters)
Area (square feet, square meters)
Mass and Weight (ounces,grams)
Liquid Volume (pints, liters)
Temperature (Fahrenheit, Celsius

Length

Type in what you know
Conversion Factor
Result
inches
* 25.4 =
millimeters
feet
* 30 =
centimeters
yards
* 0.9 =
meters
miles
* 1.6 =
kilometers
--
millimeters
* 0.04 =
inches
centimeters
* 0.4 =
inches
meters
* 1.1 =
yards
kilometers
* 0.62 =
miles

Area

square inches
* 6.5 =
sq cm
square feet
* 0.09 =
sq meters
square yards
* 0.8 =
sq meters
square miles
* 2.6 =
sq kilometers
square acres
* 0.4 =
sq hectares
--
square cm
* 0.16 =
sq inches
square meters
* 1.2 =
sq yards
square km
* 0.4 =
sq miles
square hectares
* 2.5 =
sq acres

Mass and Weight

fluid ounces
* 30 =
grams
pounds
* 0.45 =
kilograms
short tons
* 0.9 =
metric tons
--
grams
* 0.335 =
fluid ounces
kilograms
* 2.2 =
pounds
metric tons
* 1.1 =
short tons

Liquid Volume

ounces
* 30 =
milliliters
pints
* 0.47 =
liters
quarts
* 0.95 =
liters
gallons
* 3.8 =
liters
--
milliliters
* 0.034 =
ounces
liters
* 2.1 =
pints
liters
* 1.06 =
quarts
liters
* 0.26 =
gallons

Temperature

Fahrenheit
-32*5/9=
Celsius
Celsius
*9/5+32=
Fahrenheit

JavaScript Programmers

This example actually contains very little JavaScript code. Between the and tags in this page is the one and only JavaScript function that does all the calculations. That function, named calc(), is shown below:

Each cell that the reader is allowed to type in contains an onchange event handler that's triggered after the reader types something and leaves the cell. Each cell passes passes three values to the calc() JavaScript function, 1) the value the reader typed into the cell (this.value), 2) the conversion factor needed to do the math (25.4 in the example below), and 3) the name of the field to put the result in ("cmillimeters" in the example below).

onChange="calc(this.value,25.4,'cmillimeters')"

Each field that displays an answer is made "read-only" so the user can't type over the calculated answer. To make a field read-only, make it lose the focus (blur()) as soon as it gets the focus (onfocus).



Top