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: