JavaScript - 结果立即消失[重复]答案

【问题标题】：JavaScript - result disappears immediately [duplicate]JavaScript - 结果立即消失[重复]
【发布时间】：2018-11-02 19:50:24
【问题描述】：

我是 JavaScript 的初学者。我正在构建一个 BMI 计算器。它给出几毫秒的输出，然后结果消失。

<!DOCTYPE html>
<html>
<head>
    <title>BMI Calculator</title>
</head>
<body>
        <form>
            Weight:-<input type="text" id="wtxt"><br>
            Height:-<input type="text" id="htxt"><br>
            BMI:-<input type="text" id="bmitxt"><br>

            <input type="reset" value="clear"><br>

            <button onclick="calcbmi()">Calc BMI</button>
        </form>

        <script type="text/javascript">
            function calcbmi(){
                var w=parseInt(document.getElementById('wtxt').value);
                var h=parseInt(document.getElementById('htxt').value);

                var z=w/(h*h);

                document.getElementById('bmitxt').value=z;
            }
        </script>
</body>
</html>

【问题讨论】：

因为按钮是提交按钮，表单提交。
onclick="calcbmi();return false;"
删除<form> 元素，你没有用它做任何事情。
JavaScript 是一个词。
@juvian 它也有效。谢谢！

标签： javascript html

【解决方案1】：

看起来 cmets 正在回答您的问题。最短路径是将按钮更改为不同的类型，这样它就不会提交表单，从而导致页面再次加载。表单使输入变得简单，但并非绝对必要。

计算 BMI

更多信息在这里： How to prevent buttons from submitting forms

【讨论】：

【解决方案2】：

默认情况下，表单在提交时会发出 GET 请求。 Source

每次单击提交时，您都在提交表单，并且由于未指定任何操作属性，因此浏览器正试图向任何内容发出请求。我在下面复制了您的代码的工作示例。如 cmets 中所述，删除表格。然后你的代码就可以工作了。

<!DOCTYPE html>
<html>
<head>
    <title>BMI Calculator</title>
</head>
    <body>

      Weight:-<input type="text" id="wtxt"><br>
      Height:-<input type="text" id="htxt"><br>
      BMI:-<input type="text" id="bmitxt"><br>

      <input type="reset" value="clear"><br>

      <button onclick="calcbmi()">Calc BMI</button>


      <script type="text/javascript">
         function calcbmi(){
            var w=parseInt(document.getElementById('wtxt').value);
            var h=parseInt(document.getElementById('htxt').value);

            var z=w/(h*h);

            document.getElementById('bmitxt').value=z;

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

你可以看到一个小提琴here

【讨论】：

【解决方案3】：

要将行为与视图分开，您可以这样做：

按钮：

<button>Calc BMI</button>

脚本：

<script type="text/javascript">
    document.querySelector("button").addEventListener("click", function(event) {
        calcbmi();
        event.preventDefault();
    }, false);

    function calcbmi() {
        var w = parseInt(document.getElementById('wtxt').value);
        var h = parseInt(document.getElementById('htxt').value);

        var z = w / (h * h);

        document.getElementById('bmitxt').value = z;
    }
</script>

Source

【讨论】：

具有语义有用性，当浏览器出于某种原因禁用 JavaScript 时，它可能会作为备用计算器提交给服务器。