将字符串返回到类型为“0”的输出字段;数字“;针对用户错误javascript

Returning a string to an output field of type "number" for user error javascript

本文关键字：字段 数字 javascript 错误 用户 输出 返回 字符串 类型      更新时间：2023-09-26

我正在做一个项目来掌握javascript和html5的窍门。

现在我有两个文本字段，input_a和input_b。我有一个输出字段，它将使用这两个数字（可以是整数或浮点），并对它们进行计算，然后将其返回到输出字段。为了简单起见（忽略CSS文件），以下是设置方法：

<!DOCTYPE html>
<html>
        <head>
            <title>JS Test</title>
            <meta charset="utf-8" />
        </head>
        <script>
            function select_formula() {
                track_a = input_a.valueAsNumber;
                track_b = input_b.valueAsNumber;
                if(track_a > 200.0 || track_a < 0.0) {
                    console.log("Number must be between 0 BPM and 200 BPM");
                    return false;
                }
                if(track_b > 200.0 || track_b < 0.0) {
                    console.log("Number must be between 0 BPM and 200BPM");
                    return false;
                }
                if(track_a > track_b) {
                    return "((track_a - track_b) / track_a) * 100";
                } else if(track_a < track_b) {
                    return "((track_a - track_b) / track_b) * 100";
                } else {
                    return "0.0";
                }
            }
        </script>
    <body>
        <header>
                <h1>JS Test</h1>
        </header>
        <form onsubmit="return false" oninput="o.value=eval(select_formula());">
                    Track A: <input name="input_a" id="input_a" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track A"><br/>
                    Track B: <input name="input_b" id="input_b" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track B"><br/>
                    <br />
                    Output: <output name="o" step="0.01" value="0.00" for="a b"></output>
        </form>
    </body>
</html>

值得庆幸的是，现在没有人可以在文本字段中输入字符串，因为我的输入类型为number。但是，如果有人输入了超出此范围的无效数字，我希望输出显示错误消息"Number must be between 0 BPM and 200 BPM"。

到目前为止，我可以创建一个alert()，但我真的不需要惹恼用户，也不需要犯那么多错误。那么，是否有任何方法可以将我的错误发送到输出？我是JavaScript的新手，所以现在我只想学习很多不同的教程。我们非常感谢在正确方向上提供的任何帮助。

最简单的方法是，您想要一个div，用于将错误附加到其中。类似于：

   <script>
        function isValid(track_a, track_b) {
           if(track_a > 200.0 || track_a < 0.0) {
                return "Number must be between 0 BPM and 200 BPM";
            }
            if(track_b > 200.0 || track_b < 0.0) {
                return "Number must be between 0 BPM and 200BPM";
            }
            return "";
       }
       function calculate(track_a, track_b) {
            if(track_a > track_b) {
                return "((track_a - track_b) / track_a) * 100";
            } else if(track_a < track_b) {
                return "((track_a - track_b) / track_b) * 100";
            } else {
                return "0.0";
            }
        }
      function main() {
            track_a = input_a.valueAsNumber;
            track_b = input_b.valueAsNumber;
            var message = isValid(track_a, track_b);
            if (message !== "")
                 $('#result').text(message);
           else {
                 var result = calculate(track_a, track_b);
                 $('#result').text(result);
           }
      }
  </script>
<body>
        <form onsubmit="return false" oninput="o.value=eval(main());">
                    Track A: <input name="input_a" id="input_a" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track A"><br/>
                    Track B: <input name="input_b" id="input_b" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track B"><br/>
                    <br />
                    <div id="result"></div>
                    Output: <output name="o" step="0.01" value="0.00" for="a b"></output>
        </form>

但我认为你需要更广泛的背景。

请查看AngularJS教程，这是目前在客户端使用的流行JavaScript框架。

考虑使用type="range"输入，这将限制用户可以输入的数字范围。此外，范围输入将提高移动用户的可用性。否则，如果您希望用户能够通过键入进行输入，您可以用js覆盖输入数字，并且不需要输出错误消息。

    <script>
        message = "";
        function select_formula() {
            track_a = input_a.valueAsNumber;
            track_b = input_b.valueAsNumber;
            if (track_a > 200) {
                input_a.value = 200;
            } else if (track_a < 0) {
                input_a.value = 0;
            } else if (track_b > 200) {
                input_b.value = 200;
            } else if (track_b < 0) {
                input_b.value = 0;
            }
            if(track_a > track_b) {
                return "((track_a - track_b) / track_a) * 100";
            } else if(track_a < track_b) {
                return "((track_a - track_b) / track_b) * 100";
            } else {
                return "0.0";
            }
        }
    </script>

若您想用错误消息通知用户，只需添加错误消息专用标签即可。默认情况下不可见的<span>或<div>，并在错误事件中使用js将其设置为可见。

相关文章：