距离转换器一直导航到 PHP 页面

Question

我正在开发一个基本的距离转换器，点击要提交的表单会不断重定向到 somephpfile.php（这不存在，因为这是一个练习），而不是以公里为单位发布转换后的数字（ mi > km) 到 div "container bottom." 这是我到目前为止所得到的，任何帮助将不胜感激：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Miles to Kilometers Converter</title>

    <!--/ /-------- Normalize CSS --------/ /-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">

    <!--/ /-------- Google Fonts --------/ /-->
    <link href="https://fonts.googleapis.com/css?family=Oswald|PT+Sans&display=swap" rel="stylesheet">

    <!--/ /-------- My Styles --------/ /-->
    <link href="styles.css" rel="stylesheet">

</head>

<body>

    <h1>Miles to Kilometers Converter</h1>

    <div class="container top">
        <p>Type in a number of miles and click the button to convert the distance to kilometers.</p>

        <form method="post" action="somephpfile.php" id="convert">

            <input type="number" name="distance" id="distance" placeholder="distance">
            <input type="submit" name="convertdist" value="Convert Distance">

        </form>
    </div>
    <div class="container bottom" id="answer">
        <h2 class="invisible">Answer goes here</h2>
    </div>

    <script>
            var miles = parseInt(document.getElementById("distance").value);
            var kilometers = (miles * 1.609344);
            var answer = document.createElement("P");
            answer.innerHTML = `"${miles} miles converts to ${kilometers} kilometers"`;
            document.getElementsByName("convertdist").addEventListener("click", function(event){
                event.preventDefault();
                    document.getElementById("answer").appendChild();
        });


    </script>
</body>
</html>

Answer 1

<form method="post" action="somephpfile.php" id="convert">
    <input type="number" name="distance" id="distance" placeholder="distance">
    <input type="submit" name="convertdist" value="Convert Distance">
</form>

当您单击提交按钮时，将提交此表单。制作表格如下。

<form id="convert"> <!-- Taken out the attributes method and action -->
    <input type="number" name="distance" id="distance" placeholder="distance">
    <input type="button" name="convertdist" value="Convert Distance" onclick="convert()"> <!-- Changed the button type submit->button -->
</form>

对于JavaScript，你必须将JS逻辑包含在一个函数中，并在提交按钮的onclick期间调用它，如：

<script>
function convert(){
    var miles = parseInt(document.getElementById("distance").value);
    var kilometers = (miles * 1.609344);
    var answer = document.createElement("P");
    answer.innerHTML = `"${miles} miles converts to ${kilometers} kilometers"`;
    document.getElementById("answer").appendChild(answer);
}
</script>

你的错误是：

转换+附加答案应该是可调用的，这意味着它应该是一个函数。
只要单击按钮，就会调用转换函数。所以，它应该绑定到转换按钮的 onclick 事件。
任何带有 submit 类型按钮的 HTML 表单无论如何都会被提交到 action 属性指定的目标，除非你用 event.preventDefault() 阻止它在你的 JS 中。你做到了，但不是在应该做的地方。
您代码中的以下内容从您放置的位置看毫无意义。

document.getElementsByName("convertdist").addEventListener("click", function(event){
    event.preventDefault();
        document.getElementById("answer").appendChild();
    });

放入工作版本in this fiddle。找时间退房。

距离转换器一直导航到 PHP 页面

Distance converter keeps navigating to PHP page

javascript

php

function

converters