Question

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

Answer 1

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

Calc BMI

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

Answer 2

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

每次单击“提交”时，您都会提交表单，并且浏览器尝试向任何内容发出请求，因为没有指定任何操作属性。我在下面复制了一个代码的工作示例。如评论中所述，删除表单。那么你的代码就可以了。

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

Answer 3

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

按钮：

readelf -a

剧本：

<button>Calc BMI</button>

Source

JavaScript - 结果立即消失

3 个答案: