JavaScript Converter Widgets

I had never written a blog before, and a new found love of web programming got me thinking that I should probably chronicle the things I have learned. I have learned many things things along the way so things may be a little out of order.  I decided to start by posting a little tutorial on one of my favorite projects.

After spending some time learning a little JavaScript and I figured the best way to to get started was to build a couple of length an unit converters.  The Unit Whiz is a bit more light weight and utilizes the html form to do some of the work.   The Length Converter has a bit more JavaScript but I kept things simple in the form.

Now on to some code…  Each converter requires three files to function, a something.html, something.css, and a something.js.  Create each file as follows.

Lets Start with the Unit Whiz

Create a file in your favorite web or text editor (I use Microsoft Expression Web) and save it as unitwhiz.html.  Paste in the following code.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="author" content="Brian W Kapke www.yourshoesuntied.com">
<script type="text/javascript" src="converter.js">
</script>

<link href="main.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="convertercontainer">
<h1 class="title">Unit Whiz</h1>
<h3 class="subtitle">Unit and Measurement Converter</h3>

<h2 class="conversiongroup">Volume</h2>

<form method="post" >
<table class="converter"> <!--Tablespoons to Teaspoons -->
<tr>
<td class="leftcol">
Tablespoons
<input class="placeholder" type="text" name="first" value="Tablespoons" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=3 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input class="converterbutton" type="button" name="divide" value="←" onclick=Divide(this.form)>

<input class="converterbutton" type="button" name="calculate" value="→" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input type="text" class="placeholder" name="result" onfocus="value=''" value="Teaspoons" onchange=Divide(this.form)>
Teaspoons
</td>
</tr>
</table>
</form><form method="post" >
<table class="converter"> <!--Ounces and Tablespoons -->
<tr>
<td class="leftcol">
Fluid Ounces
<input class="placeholder" type="text" name="first" value="Ounces" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=2 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input class="converterbutton" type="button" name="divide" value="←" onclick=Divide(this.form)>

<input class="converterbutton" type="button" name="calculate" value="→" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input type="text" class="placeholder" name="result" onfocus="value=''" value="Tablespoons" onchange=Divide(this.form)>
Tablespoons
</td>
</tr>
</table>
</form><form method="post" >
<table class="converter"> <!--fluid ounces and fluid cups -->
<tr>
<td class="leftcol">
Fluid Cups
<input class="placeholder" type="text" name="first" value="Cups" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=8 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input class="converterbutton" type="button" name="divide" value="←" onclick=Divide(this.form)>

<input class="converterbutton" type="button" name="calculate" value="→" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input type="text" class="placeholder" name="result" onfocus="value=''" value="Ounces" onchange=Divide(this.form)>
Fluid Ounces
</td>
</tr>
</table>
</form>
<form method="post" >
<table class="converter"> <!--gallons to ounces-->
<tr>
<td class="leftcol">
Gallons
<input class="placeholder" type="text" name="first" value="Gallons" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=128 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input class="converterbutton" type="button" name="divide" value="←" onclick=Divide(this.form)>

<input class="converterbutton" type="button" name="calculate" value="→" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input type="text" class="placeholder" name="result" onfocus="value=''" value="Ounces" onchange=Divide(this.form)>
Fluid Ounces
</td>
</tr>
</table>
</form>

<h2 class="conversiongroup">Weight</h2>
<form method="post" >
<table class="converter"> <!--pounds and ounces-->
<tr>
<td class="leftcol">
Pounds
<input class="placeholder" type="text" name="first" value="Pounds" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=16 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input type="button" name="divide" value="←" class="converterbutton" onclick=Divide(this.form)>

<input type="button" name="calculate" value="→" class="converterbutton" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input class="placeholder" type="text" name="result" onfocus="value=''" value="Ounces" onchange=Divide(this.form)>
Ounces
</td>
</tr>
</table>
</form>
<form method="post">
<table class="converter"> <!--kilograms and pounds-->
<tr>
<td class="leftcol">
Kilograms
<input class="placeholder" type="text" name="first" value="Kilograms" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=2.20462262 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input type="button" name="divide" value="←" class="converterbutton" onclick=Divide(this.form)>

<input type="button" name="calculate" value="→" class="converterbutton" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input class="placeholder" type="text" name="result" onfocus="value=''" value="Pounds" onchange=Divide(this.form)>
Pounds
</td>
</tr>
</table>
</form>
<form method="post">
<table class="converter"> <!--Pounds and Grams-->
<tr>
<td class="leftcol">
Pounds
<input class="placeholder" type="text" name="first" value="Pounds" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=453.59237 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input type="button" name="divide" value="←" class="converterbutton" onclick=Divide(this.form)>

<input type="button" name="calculate" value="→" class="converterbutton" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input class="placeholder" type="text" name="result" onfocus="value=''" value="Grams" onchange=Divide(this.form)>
Grams
</td>
</tr>
</table>
</form>
<form method="post">
<table class="converter"> <!--Ounces and Grams-->
<tr>
<td class="leftcol">
Ounces
<input class="placeholder" type="text" name="first" value="Ounces" onfocus="value=''" onchange=Multiply(this.form)>

<input type="hidden" name="second" value=28.3495231 onchange=Multiply(this.form)>
</td>
<td class="centercol">

<input type="button" name="divide" value="←" class="converterbutton" onclick=Divide(this.form)>

<input type="button" name="calculate" value="→" class="converterbutton" onclick=Multiply(this.form)>
</td>

<td class="rightcol">

<input class="placeholder" type="text" name="result" onfocus="value=''" value="Grams" onchange=Divide(this.form)>
Grams
</td>
</tr>
</table>
</form>
<h2 class="conversiongroup">Temperature</h2>
<form method="post" >
<table class="converter">
<tr>
<td class="leftcol">

Celsius

<input class="placeholder" type="text" value="Celsius" onfocus="value=''" name="celsius" onchange=temp(this.form)>

<td class="centercol">

<input type="button" class="converterbutton" value="←" onclick="tempback(this.form)">

<input type="button" class="converterbutton" value="→" onclick="temp(this.form)">
</td>

<td class="rightcol">

<input class="placeholder" type="text" value="Farenheit" onfocus="value=''" name="fahrenheit" onchange=tempback(this.form)>

Fahrenheit
</td>
</tr>
</table>
</form>

<form>
<table class="converter">
<tr>
<td class="refresh">
<input type=button value="Reset" class="converterbutton" onClick="window.location.reload()">
</td>
</tr>
</table>
<h3 class="linkto"><a href="http://yourshoesuntied.com/?p=12">Home</a></h3><br />
<h3 class="linkto"><a href="/length_converter.html">Go to Length Converter</a></h3><br />

</form>
</div>

</body>

</html>


Now Create a file called main.css and paste in the following code.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset*/

body {
margin-top:3em;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color:#281502;
margin-bottom:3em;
}

#convertercontainer{
border-radius: 10px;
border: medium solid #32160A;
padding: 2em 1em 2em 1em;
background-color: #BC793D;
width: 600px;
margin: 0 auto;
padding-bottom:3em;
}
h1.title {

margin-top:0px;
font-size:3em;
color:red;
text-align:center;
letter-spacing:.3em;
text-shadow: 2px 2px 2px #000;
margin-bottom: .5em;
font-family:Tahoma;
}
h3.subtitle {
font-size:1em;
color:black;
text-align:center;
letter-spacing:.5em;
font-family: Tahoma;
border-bottom:medium #32160A solid;
margin: 0 2em 0 2em;
padding-bottom:.5em;
}
hr.headbreak {
margin: .5em 3em 0 3em;
color: #32160A;
height: 1px;
background-color:#32160A;
}
h2.conversiongroup{
font-size:2.2em;
color:#32160A;
text-align:center;
/*text-shadow: 2px 2px 2px #000;*/
/*width:200px;
margin-left:auto;
margin-right:auto;*/
margin-bottom:1em;
margin-top:1em;
letter-spacing:.5em;
}
table.converter {
width:600px;
margin-left:auto;
margin-right:auto;
}

td.refresh {
/*width:600px;
margin-left:auto;
margin-right:auto;*/
text-align:center;
padding-top:1em;

}
td.leftcol {
text-align: right;
width: 275px;
}

td.centercol {
width:75px;
text-align:center

}

td.rightcol {
text-align: left;
width: 275px;

}

input.converterbutton {
background-color: #D8A36D;
/*border: thin solid #32160A;*/
border: 0px black none;
border-radius: 8px;
color: black;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
}
input.converterbutton:hover {
/*border: thin solid #32160A;*/
border-radius: 8px;
background-color: #32160A;
color: #FFFFFF;
}

input.converterbutton:active {
/*border: thin solid #32160A;*/
border-radius: 8px;
background-color: red;
color: #FFFFFF;
}

input.placeholder {
font-style:italic;
color:white;
border:2px solid #32160A;
border-radius:6px;
background: black;
}
h3.linkto {
text-align:center;
margin-top:1em;
}

a {
text-decoration:none;
}
a:link {
color: #FF0000;
font-size:2em;
}
a:active {
color:#ff0000;
}
a:visited {
color:#FF0000;
}
a:hover {
color: orange;


Lastly, create a file named converter.js and paste in the following code.
function Multiply (form)
{
if ((form.first.value == "") ||
(form.second.value ==""))
return;
form.result.value=(form.first.value * form.second.value).toFixed(2);
}
function Divide (form)
{
if ((form.first.value == "") ||
(form.second.value ==""))
return;
form.first.value=(form.result.value / form.second.value).toFixed(2);
}
function temp (form) {
form.fahrenheit.value = ((9/5) * form.celsius.value+32).toFixed(2);
}
function tempback (form) {
form.celsius.value = ((form.fahrenheit.value-32)/ 1.8).toFixed(2);
}

Once you have saved these three files lets move on to the next part.

The Length Converter

The length converter is a bit more complicated, actually just more tedious to write.  It has a lot of conversion factors and many lines of JavaScript as you’ll see below.  Also, don’t build a house or a bridge using these conversions, I haven’t double or triple checked the factors.

The idea with this length converter is to convert any unit of length to any unit of length.  So, 1 foot can be converted to mm, cm, meters, miles etc. in order to do that we need the following three files

First is length_converter.html

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Length Unit Converter</title>

<script type="text/javascript" src="length_converter.js">
</script>

<link href="length_converter.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="sitecontainer">
<div id="length_container">

<h1 class="converterheading">Length Converter</h1>

<form name="conversionLength" id="conversionform" method="post">
<table class="lengthConverter">
<tr>
<td class="left">
<input class="inputcell" type="number" name="lengthInput" size="22" value="0" step="0.1" onchange="lengthConvert(this.form)" onfocus="value=''">
</td>
<td class="center">
<input class="inputcellbutton" type="button" onClick="lengthConvert();" size="15" value="→">
</td>
<td class="right">
<input class="inputcell" type="text" name="lengthOutput" size="22" value="Answer">
</td>
</tr>

<tr>
<td class="left">
<select class="converter" name="length1st" onChange="lengthConvert();">
<option value="x" selected="selected">Convert From</option>
<option value="1">Milimeters</option>
<option value="2">Centimeters</option>
<option value="3">Decimeters</option>
<option value="4">Meters</option>
<option value="5">Kilometers</option>
<option value="6">Mils (1/1000 inch)</option>
<option value="7">Inches</option>
<option value="8">Feet</option>
<option value="9">Yards</option>
<option value="10">Miles</option>
</select>
</td>
<td>
</td>
<td class="right">
<select class="converter" name="length2nd" onChange="lengthConvert();">
<option value="x" selected="selected">Convert to</option>
<option value="1">Milimeters</option>
<option value="2">Centimeters</option>
<option value="3">Decimeters</option>
<option value="4">Meters</option>
<option value="5">Kilometers</option>
<option value="6">Mils (1/1000 inch)</option>
<option value="7">Inches</option>
<option value="8">Feet</option>
<option value="9">Yards</option>
<option value="10">Miles</option>
</select>
</td>
</tr>
</table>
<table class="refresh">
<tr>
<td class="refresh">
<input type=button value="Reset" class="inputcellbutton" onClick="window.location.reload()">
</td>
</tr>
</table>

</form>
<h3 class="converterdirections">Type or toggle a value to be converted and then select the units would like to convert from and to.</h3>

<h3 class="linkto"><a href="http://yourshoesuntied.com/?p=12">Home</a></h3><br>
<h3 class="linkto"><a href="/unitwhiz.html">Go To Unit Whiz</a></h3><br>

</div>
</div>

</body>

</html>


Next, you will need a style sheet.  Create length_converter.css and paste in the following code.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset*/

body {
background-color:#000066;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

}
#sitecontainer {
background-color: #DDE8FF;
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
margin-bottom:2em;
padding-top: 2em;
min-height: 550px;
border: thin solid #DDE8FF;
border-radius: 10px;
}

h1.converterheading {
margin: .5em 0em .7em 0em;
text-align:center;
font-size:3.7em;
color:#000066;
}
h3.converterdirections {
text-align:center;
margin-top:2em;
font-size:large;
line-height:2em;
}
#length_container {
width: 500px;
margin-left: auto;
margin-right: auto;
/*border: thick solid #0000FF;*/
border-radius: 10px;
padding: 1em 1em 3em 1em;
}

table.lengthConverter {
margin-left:auto;
margin-right:auto;

}

td.left {
text-align:right;
}
td.center {
text-align:center;
padding-right:1em;
padding-left:1em;
margin:0 auto;
}
td.right {
text-align:left;
}
select.converter {
margin-top: 1em;
text-align:center;
background-color:#F0F7FF;
border:thin black solid;
width:100%;
border-radius:5px;
font-family: Tahoma;
font-weight:900;
height:30px;
font-size:large;
color:black;
}
select.converter:hover {
}

input.inputcell {
background-color: #F0F7FF;
border: thin black solid;
border-radius: 5px;
text-align: center;
font-family: Tahoma;
height: 30px;
font-size: large;
}
input.inputcellbutton {
background-color: #F0F7FF;
border: thin black solid;
border-radius: 5px;
text-align: center;
font-family: Tahoma;
height: 30px;
font-size: large;
}

input.inputcellbutton:hover {
background-color: orange;
border: thin black solid;
border-radius: 5px;
text-align: center;
font-family: Tahoma;
height: 30px;
font-size: large;
}
input.inputcellbutton:active {
background-color: #FF0000;
border: thin black solid;
border-radius: 5px;
text-align: center;
font-family: Tahoma;
height: 30px;
font-size: large;
}
h3.linkto {
text-align:center;
margin-top:2em;

}

a {
text-decoration:none;
}
a:link {
color: #FF6600;
font-size:2em;
}
a:active {
color:#ff0000;
}
a:visited {
color:#FF6600;
}
a:hover {
color: orange;
}
table.refresh {
margin-top:1.5em;
width:40px;
margin-left:auto;
margin-right:auto;
text-align:center;

}


Lastly you will need a file named length_converter.js create this file and add the following code.
<!--
function lengthConvert() {
document.conversionLength.length1st.selectedIndex;
document.conversionLength.length2nd.selectedIndex;
document.conversionLength.lengthInput.value;
document.conversionLength.lengthOutput.value;

// Millimeter conversion area

// mm-mm
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// mm-cm
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.1).toFixed(6));}
// mm-dm
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.01).toFixed(6));}
// mm-m
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.001).toFixed(6));}
// mm-km
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.000001).toFixed(6));}
// mm-mil
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *39.3700787).toFixed(6));}
// mm-in
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.0393700787).toFixed(6));}
// mm-ft
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.0032808399).toFixed(6));}
// mm-yd
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.0010936133).toFixed(6));}
// mm-mi
if (document.conversionLength.length1st.selectedIndex == 1 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.0000006213712).toFixed(6));}

//Centimeter Conversion area

// cm-mm
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 10).toFixed(6));}
// cm-cm
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// cm-dm
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.1).toFixed(6));}
// cm-m
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.01).toFixed(6));}
// cm-km
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.00001).toFixed(6));}
// cm-mil
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *393.700787).toFixed(6));}
// cm-in
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.393700787).toFixed(6));}
// cm-ft
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.032808399).toFixed(6));}
// cm-yd
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.010936133).toFixed(6));}
// cm-mi
if (document.conversionLength.length1st.selectedIndex == 2 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.000006213712).toFixed(6));}

//Decimeter Conversion area

// dm-mm
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 100).toFixed(6));}
// dm-cm
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 10).toFixed(6));}
// dm-dm
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// dm-m
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.1).toFixed(6));}
// dm-km
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.0001).toFixed(6));}
// dm-mil
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *3937.00787).toFixed(6));}
// dm-in
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *3.93700787).toFixed(6));}
// dm-ft
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.32808399).toFixed(6));}
// dm-yd
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.10936133).toFixed(6));}
// dm-mi
if (document.conversionLength.length1st.selectedIndex == 3 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.00006213712).toFixed(6));}

//Meter Conversion area

// m-mm
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1000).toFixed(6));}
// m-cm
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 100).toFixed(6));}
// m-dm
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *10).toFixed(6));}
// m-m
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// m-km
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .001).toFixed(6));}
// m-mil
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 39370.0787).toFixed(6));}
// m-in
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 39.3700787).toFixed(6));}
// m-ft
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 3.2808399).toFixed(6));}
// m-yd
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1.0936133).toFixed(6));}
// m-mi
if (document.conversionLength.length1st.selectedIndex == 4 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.0006213712).toFixed(6));}

//Meter Conversion area

// km-mm
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1000000).toFixed(6));}
// km-cm
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 100000).toFixed(6));}
// km-dm
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *10000).toFixed(6));}
// km-m
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1000).toFixed(6));}
// km-km
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// km-mil
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 39370078.7).toFixed(6));}
// km-in
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 39370.0787).toFixed(6));}
// km-ft
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 3280.8399).toFixed(6));}
// km-yd
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1093.6133).toFixed(6));}
// km-mi
if (document.conversionLength.length1st.selectedIndex == 5 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.6213712).toFixed(6));}

//Mil Conversion area

// mil-mm
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0254).toFixed(6));}
// mil-cm
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .00254).toFixed(6));}
// mil-dm
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.000254).toFixed(6));}
// mil-m
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0000254).toFixed(6));}
// mil-km
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0000000254).toFixed(6));}
// mil-mil
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// mil-in
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .001).toFixed(6));}
// mil-ft
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .00008333).toFixed(6));}
// mil-yd
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0000277778).toFixed(6));}
// mil-mi
if (document.conversionLength.length1st.selectedIndex == 6 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.00000001578).toFixed(6));}

//Inch Conversion area

// Inch-mm
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 25.4).toFixed(6));}
// Inch-cm
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 2.54).toFixed(6));}
// Inch-dm
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) *.254).toFixed(6));}
// Inch-m
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0254).toFixed(6));}
// Inch-km
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0000254).toFixed(6));}
// Inch-mil
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1000).toFixed(6));}
// Inch-in
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// Inch-ft
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (1 / 12)).toFixed(6));}
// Inch-yd
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (1 / 36)).toFixed(6));}
// Inch-mi
if (document.conversionLength.length1st.selectedIndex == 7 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (1 / 63360)).toFixed(6));}

//Foot Conversion area

// Foot-mm
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 304.8).toFixed(6));}
// Foot-cm
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 30.48).toFixed(6));}
// Foot-dm
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 3.048).toFixed(6));}
// Foot-m
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .3048).toFixed(6));}
// Foot-km
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0003048).toFixed(6));}
// Foot-mil
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 12000).toFixed(6));}
// Foot-in
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 12).toFixed(6));}
// Foot-ft
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// Foot-yd
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (1 / 3)).toFixed(6));}
// Foot-mi
if (document.conversionLength.length1st.selectedIndex == 8 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (1 / 5280)).toFixed(6));}

//Yard Conversion area

// Yard-mm
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 914.4).toFixed(6));}
// Yard-cm
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 91.44).toFixed(6));}
// Yard-dm
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 9.144).toFixed(6));}
// Yard-m
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .9144).toFixed(6));}
// Yard-km
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * .0009144).toFixed(6));}
// Yard-mil
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 36000).toFixed(6));}
// Yard-in
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 36).toFixed(6));}
// Yard-ft
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (3)).toFixed(6));}
// Yard-yd
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
// Yard-mi
if (document.conversionLength.length1st.selectedIndex == 9 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * (1 / 1760)).toFixed(6));}

//Mile Conversion area

// Mile-mm
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 1)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1609344).toFixed(6));}
// Mile-cm
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 2)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 160934.4).toFixed(6));}
// Mile-dm
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 3)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 16093.44).toFixed(6));}
// Mile-m
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 4)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1609.344).toFixed(6));}
// Mile-km
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 5)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1.609344).toFixed(6));}
// Mile-mil
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 6)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 63360000).toFixed(6));}
// Mile-in
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 7)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 63360).toFixed(6));}
// Mile-ft
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 8)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 5280).toFixed(6));}
// Mile-yd
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 9)
{document.conversionLength.lengthOutput.value = (((document.conversionLength.lengthInput.value) * 1760).toFixed(6));}
// Mile-mi
if (document.conversionLength.length1st.selectedIndex == 10 && document.conversionLength.length2nd.selectedIndex == 10)
{document.conversionLength.lengthOutput.value = document.conversionLength.lengthInput.value;}
}

// -->


Save all of these files and make sure their in the same folder. If all has gone well and I haven’t made any mistakes you should have two functioning converters. Test them out, does 12 inches convert to 1 foot? Hopefully this was helpful, and I haven’t made any errors.

BrianWK


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin