Help with HTML Javascript?

Beeeyeee · December 5, 2016

this is for an assignment. I have to use a text box to get a value in Miles. Then when the button is pressed it will show the conversion to Kilometers as well. (1 mile equals ~0.6km)

it all works but the value for miles entered be the user shows up as "undefined" and the conversions to kilometers shows up as Not a number... What am I doing wrong?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">

        function Convertion(){
        var Distance_Miles;
        Distance_Miles= document.getElementById("Distance_Miles").value;
        Distance_Kilometers= Distance_Miles * 0.6;
        document.getElementById("Distance_Miles").innerHTML= "Your distance is " + Distance_Miles + " Miles. That's " + Distance_Kilometers + " Kilometers!";
        }
    </script>
    </head>

    <body>
            <h1>HTML!</h1>
<div>
    <h2 id=Distance_Miles>Convert Miles to Kilometers</h2>
    <p><label for="Distance_Miles"> Give me a number</label>
    <input type="text" id="Distance_Miles"/></p>
    <p><button onclick="Convertion();">Get Distance</button></p>
</div>

leonfagan71 · December 5, 2016

5 minutes ago, Beeeyeee said:

this is for an assignment. I have to use a text box to get a value in Miles. Then when the button is pressed it will show the conversion to Kilometers as well. (1 mile equals ~0.6km)

it all works but the value for miles entered be the user shows up as "undefined" and the conversions to kilometers shows up as Not a number... What am I doing wrong?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">

        function Convertion(){
        var Distance_Miles;
        Distance_Miles= document.getElementById("Distance_Miles").value;
        Distance_Kilometers= Distance_Miles * 0.6;
        document.getElementById("Distance_Miles").innerHTML= "Your distance is " + Distance_Miles + " Miles. That's " + Distance_Kilometers + " Kilometers!";
        }
    </script>
    </head>

    <body>
            <h1>HTML!</h1>
<div>
    <h2 id=Distance_Miles>Convert Miles to Kilometers</h2>
    <p><label for="Distance_Miles"> Give me a number</label>
    <input type="text" id="Distance_Miles"/></p>
    <p><button onclick="Convertion();">Get Distance</button></p>
</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">

        function Conversion(){
        var Distance_Miles;
        var Distance_Kilometers ;
        Distance_Miles= document.getElementById("Distance_Miles").value;
        Distance_Kilometers= Distance_Miles * 0.6;
        document.getElementById("conversionText").innerHTML= "Your distance is " + Distance_Miles + " Miles. That's " + Distance_Kilometers + " Kilometers!";
        }
    </script>
    </head>

    <body>
            <h1>HTML!</h1>
<div>
    <h2 id="conversionText">Convert Miles to Kilometers</h2>
    <p><label for="Distance_Miles"> Give me a number</label>
    <input type="text" id="Distance_Miles"/></p>
    <p><button onclick="Conversion();">Get Distance</button></p>
</div>

changed a few div id's around and it seems to work.

An ID is supposed to be unique for each element.

Also changed the function name to conversion and not convertion

Distance_Kilometers was also not being defined.

Beeeyeee · December 5, 2016

Just now, leonfagan71 said:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">

        function Conversion(){
        var Distance_Miles;
        var Distance_Kilometers ;
        Distance_Miles= document.getElementById("Distance_Miles").value;
        Distance_Kilometers= Distance_Miles * 0.6;
        document.getElementById("conversionText").innerHTML= "Your distance is " + Distance_Miles + " Miles. That's " + Distance_Kilometers + " Kilometers!";
        }
    </script>
    </head>

    <body>
            <h1>HTML!</h1>
<div>
    <h2 id="conversionText">Convert Miles to Kilometers</h2>
    <p><label for="Distance_Miles"> Give me a number</label>
    <input type="text" id="Distance_Miles"/></p>
    <p><button onclick="Conversion();">Get Distance</button></p>
</div>