Length Converter In JavaScript

So when we enter any value in the From TextBox, it will be converted depending on the From and To Units and the converted value will be shown in the To Value TextBox.

Step 1: First we create the From Unit DropDownListBox like this:

Here we use a Table to show the list of units and a button to show the selected units like this:

<table cellpadding="0" cellspacing="0">
<tr>
<td><b>From </b>
<input type="button" id="btnFrom" value="Millimeters" align="center" style="width: 260px;" />
</td>
<td>
<input type="button" onclick="document.getElementById('tblFrom').style.display = 'block';" value="v" />
</td>
</tr>
<tr>
<td>
<table id="tblFrom" cellpadding="0" cellspacing="0" style="display: none;" onclick="Show()" onmouseout="this.style.display='None'" onmouseover="this.style.display='Block'">
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Millimeters</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Centimeters</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Meters</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Kilometers</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Inches</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Feet</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Yards</td>
</tr>
<tr>
<td></td>
<td align="center" style="background-color: Tan; margin: 0 0 0 0; width: 260px; border: 1px solid wheat;" onmouseover="this.style.color='White'"
onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Miles</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>

Here we set the display property of the table to none, it will be displayed only when we click on the arrow button. Here we also change the color of the Table Units using the onmouseover and onmouseout events like this:

<td align="center" style="background-color:Tan;margin:0 0 0 0;width:260px;border:1px solid wheat;" onmouseover="this.style.color='White'" onmouseout="this.style.color='Black'" onclick="document.getElementById('btnFrom').value=this.innerHTML,document.
getElementById('tblFrom').style.display='none';">Millimeters</td>

Step 2: Now we will write the code for the From and the To TextBox:

<b>From value</b>
<input type="text" id="txtFromValue" value="0" onkeyup="Show()" />
<b>To value</b>
<input type="text" readonly="readonly" id="txtToValue" />

Here we will specify the Show() function to convert the From value into the To value depending on the selection of the From and To DropDownListBoxes like this:

<script language="javascript" type="text/javascript">
function Show()
{
var f=document.getElementById('btnFrom').value;
var t=document.getElementById('btnTo').value;
var fromVal=document.getElementById('txtFromValue').value;
if(f=="Millimeters" && t=="Centimeters")
{
var x=fromVal*0.1;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="Meters")
{
var x=fromVal*0.001;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="Kilometers")
{
var x=fromVal*0.000001;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="Inches")
{
var x=fromVal*0.03937;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="Feet")
{
var x=fromVal*0.003281;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="0.001094")
{
var x=fromVal*0.1;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="Miles")
{
var x=fromVal*6.21e-07;
document.getElementById('txtToValue').value=x;
}
if(f=="Millimeters" && t=="Millimeters")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Centimeters //
if(f=="Centimeters" && t=="Millimeters")
{
var x=fromVal*10;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="Meters")
{
var x=fromVal*0.01;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="Kilometers")
{
var x=fromVal*0.00001;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="Inches")
{
var x=fromVal*0.393701;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="Feet")
{
var x=fromVal*0.032808;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="0.001094")
{
var x=fromVal*0.010936;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="Miles")
{
var x=fromVal*0.000006;
document.getElementById('txtToValue').value=x;
}
if(f=="Centimeters" && t=="Centimeters")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Meters //
if(f=="Meters" && t=="Millimeters")
{
var x=fromVal*1000;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Centimeters")
{
var x=fromVal*100;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Kilometers")
{
var x=fromVal*0.001;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Inches")
{
var x=fromVal*39.37008;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Feet")
{
var x=fromVal*3.28084;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Yards")
{
var x=fromVal*1.093613;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Miles")
{
var x=fromVal*0.000621;
document.getElementById('txtToValue').value=x;
}
if(f=="Meters" && t=="Meters")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Kilometers //
if(f=="Kilometers" && t=="Millimeters")
{
var x=fromVal*1000000;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Centimeters")
{
var x=fromVal*100000;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Meters")
{
var x=fromVal*1000;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Inches")
{
var x=fromVal*39370.08;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Feet")
{
var x=fromVal*3280.84;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Yards")
{
var x=fromVal*1093.613;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Miles")
{
var x=fromVal*0.621371;
document.getElementById('txtToValue').value=x;
}
if(f=="Kilometers" && t=="Kilometers")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Inches //
if(f=="Inches" && t=="Millimeters")
{
var x=fromVal*25.4;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Centimeters")
{
var x=fromVal*2.54;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Meters")
{
var x=fromVal*0.0254;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Kilometers")
{
var x=fromVal*0.000025;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Feet")
{
var x=fromVal*0.083333;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Yards")
{
var x=fromVal*0.027778;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Miles")
{
var x=fromVal*0.000016;
document.getElementById('txtToValue').value=x;
}
if(f=="Inches" && t=="Inches")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Feet //
if(f=="Feet" && t=="Millimeters")
{
var x=fromVal*304.8;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Centimeters")
{
var x=fromVal*30.48;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Meters")
{
var x=fromVal*0.3048;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Kilometers")
{
var x=fromVal*0.000305;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Inches")
{
var x=fromVal*12;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Yards")
{
var x=fromVal*0.333333;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Miles")
{
var x=fromVal*0.000189;
document.getElementById('txtToValue').value=x;
}
if(f=="Feet" && t=="Feet")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Yards //
if(f=="Yards" && t=="Millimeters")
{
var x=fromVal*914.4;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Centimeters")
{
var x=fromVal*91.44;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Meters")
{
var x=fromVal*0.9144;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Kilometers")
{
var x=fromVal*0.000914;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Inches")
{
var x=fromVal*36;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Feet")
{
var x=fromVal*3;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Miles")
{
var x=fromVal*0.000568;
document.getElementById('txtToValue').value=x;
}
if(f=="Yards" && t=="Yards")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
// Miles //
if(f=="Miles" && t=="Millimeters")
{
var x=fromVal*1609344;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Centimeters")
{
var x=fromVal*160934.4;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Meters")
{
var x=fromVal*1609.344;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Kilometers")
{
var x=fromVal*1.609344;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Inches")
{
var x=fromVal*63360;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Feet")
{
var x=fromVal*5280;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Yards")
{
var x=fromVal*1760;
document.getElementById('txtToValue').value=x;
}
if(f=="Miles" && t=="Miles")
{
var x=fromVal*1;
document.getElementById('txtToValue').value=x;
}
</script>

Output: