JavaScript

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.

image1.gif

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

image2.gif

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>

image4.gif

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:

image5.gif

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs