document.getElementById(“”).innerHTML doesn't work

Question

I wanted to make a simple website that converts miles to KM, but it doesn't work. Why?

<form>
        <input type="text" name="miles" id="miles">
        <button type="submit" onclick="milesToKm();">CONVERT</button>
    </form>
<p id="result"></p>
<script>
        function milesToKm() {
            var miles = document.getElementById("miles").value;
            var km = miles * 1.60934;
            document.getElementById("result").innerHTML = km;

        }
</script>

Answer 1

Your button has type="submit" . Pressing that button calls execution of your script, but the page gets immediately reloaded. Remove type="submit" .

As an example: http://codepen.io/pitetsky/pen/XNoyEW

Answer 2

You put type = submit so after click on this page is reload and your data is destroyed due to this you unable to see the changes. here is your working code:

<form>
        <input type="text" name="miles" id="miles">
        <button type="button" onclick="milesToKm()">CONVERT</button>
    </form>
<p  id="result"></p>
<script>
function milesToKm() {
            var miles = document.getElementById("miles").value;
            var km = miles * 1.60934;
            document.getElementById("result").innerHTML = km;

        }
</script>