CODEWITHSUNDEEP
javascripthtmlcss
B.Martin
B.Martin

Reputation: 1

I'm having trouble with my conversion form that converts inches to centimetre

I've recently started java script and finished HTML and CSS. My problem is that for some reason my form which is meant to convert centimeters to inches is not displaying the output in the second form.... although my first form is working which converts Celsius to Fahrenheit. The second weird thing is that the first form only works when all the relevant code to the second form is deleted. I am new to javascript and would appreciate any help

This is my HTML and java script.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="First Website.css" />
    <title>
    </title>
</head>

<body>


    <h1 class="title">Conversion Table
        <h1>
            <!--The div styling the box for the conversion table -->

            <div class="convert">
                <!--The title to the conversion of fahrenheit to celsius  -->
                <h1>Convert Fahrenheit to celsius </h1>

                <!--The input form for Celsius -->
                <p>
                    <input id="c" onkeyup="convert('C')">:Celsius</p>
                <!--The input form for Fahrenheit -->
                <p>
                    <input id="f" onkeyup="convert('F')">:Fahrenheit</p>

            </div>

            <div class="convert1">
                <h1>Convert Centimetres to inches</h1>

                <p>
                    <input id="m" onkeyup="convert1('M')">:Centimetres</p>
                <p>
                    <input id="i" onkeyup="convert1('I')">:inches</p>
            </div>



</body>
<script>
    // the function to convert fahrenheit to celsius and vice versa
    function convert(degree) {
        var x;
        if (degree == "C") {
            x = document.getElementById("c").value * 9 / 5 + 32;
            document.getElementById("f").value = Math.round(x);
        } else {
            x = (document.getElementById("f").value - 32) * 5 / 9;
            document.getElementById("c").value = Math.round(x);
        }
    }

    //the function to convert centimetres to inches

    function convert1(distance) {
        var y;
        if (distance == "M") {
            y = document.getElementById("m").value / 0.393701;
            document.getElementById("i").value = Math.round(y);
        }

        else {
            y = (document.getElementById("m").value * 1.393701;
            document.getElementById("i").value = Math.round(y)

        }
    }
</script>

<style>
    .convert {
        border: 2px solid black;
        width: 450px;
        top: 100px;
        position: static;
        background-color: #CD6A44;
        float: left;
        color: black;
        font-size: 20px;
        display: inline-block;
    }

    .title {
        position: fixed;
        /* or absolute */
        left: 45%;
        font-size: 40px;
    }

    body {
        background-color: #262626
    }

    h1 {
        font-ize: 25px;
    }

    .convert1 {
        border: 2px solid black;
        width: 450px;
        top: 100px;
        position: static;
        background-color: #CD6A44;
        float: right;
        color: black;
        font-size: 20px;
        display: inline-block;
    }
</style>

</html>

Upvotes: 0

Views: 78

Answers (2)

Nicolas M. Pardo
Nicolas M. Pardo

Reputation: 762

Small syntax problem in line 63, it is:

 y = (document.getElementById("m").value * 1.393701;

Should be:

 y = document.getElementById("i").value * 1.393701; //i for inch
 document.getElementById("m").value = Math.round(y) //Set meters

That's often highlighted by any IDE, you probably aren't use one, I would recommend you to install VS Code and install JSHint (Tips and Use) and JSLint (Warnings and Recommendations)

Good luck learning JS young padawan

Upvotes: 1

Jeremy Nicoll
Jeremy Nicoll

Reputation: 11

In function convert1 your lines

y = (document.getElementById("m").value * 1.393701;
document.getElementById("i").value = Math.round(y)

should be

y = (document.getElementById("i").value * 2.54;
document.getElementById("m").value = Math.round(y)

that is you got the "i" and "m" in the wrong place, and the 1.393... number is wrong. 1 inch is 2.54 cm not 1.393 cm.

Also in your css you have a typo in

h1{
font-ize:25px;
}

no "s" in font-size! Does that help?

Personally I'd leave css alone until you have the JS working.

Upvotes: 0

Related Questions