距离转换器不断导航到 PHP 页面答案

【问题标题】：Distance converter keeps navigating to PHP page距离转换器不断导航到 PHP 页面
【发布时间】：2020-06-23 02:32:04
【问题描述】：

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

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

【问题讨论】：

您有一个提交按钮，但您不想提交表单？请看看你正在使用什么：developer.mozilla.org/en-US/docs/Web/HTML/Element/form

标签： javascript php function converters

【解决方案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 属性指定的目标，除非你在JS 中用event.preventDefault() 阻止它。你做到了，但不是应该做的。
您的代码中的以下内容从您放置的位置来看毫无意义。

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

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

【讨论】：