document.getElementById（“”）。innerHTML不起作用

Question

我想制作一个简单的网站，将英里转换为KM，但是它不起作用。 为什么？

<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

您的按钮具有type="submit" 。 按下该按钮将调用您的脚本执行，但是该页面会立即重新加载。 删除type="submit" 。

例如： http : //codepen.io/pitetsky/pen/XNoyEW

Answer 2

您输入type = Submit，因此在重新加载此页面后，由于该原因您的数据被破坏，您无法看到更改。 这是您的工作代码：

<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>