如何使用 JavaScript 在给定数字处于范围内时显示消息?
front end technologyjavascriptweb development
在本文中,我们将检查数字是否处于范围内,并根据我们得到的输出显示消息。JavaScript 的这一功能允许您在创建表单或任何其他文档时进行数字验证。
语法
以下是检查数字是否在范围内并显示消息的语法 -
if (isNaN(number) || number < lower || number > upper){ document.getElementById("output").innerHTML = number + " is not in range"; } else { document.getElementById("output").innerHTML = number + " is in range"; }
此处 number 是输入的数字,用于检查其是否在范围内。 lower 和 upper 分别是范围的下限和上限。
算法
步骤 1 - 使用 prompt() 方法输入数字。
步骤 2 - 检查三个条件,第一,数字是否为 NaN;第二,数字是否小于范围的下限;第三,数字是否大于范围的上限。
步骤 3 - 如果以上三个条件中的任何一个为真,则显示数字不在范围内的消息,否则显示数字在范围内的消息。
示例
在下面的示例中,我们检查输入的数字是否在 1 到 10 的范围内,并显示消息。
<!DOCTYPE html> <html> <body> <div> <h3>Display Message if number is in Range</h3> <p>Click the below button to enter number.</p> <button onclick="display()"> click me</button> <p id="output"></p> </div> <script> function display() { const number = prompt('Please enter a number:'); if (isNaN(number) || number < 1 || number > 10) document.getElementById("output").innerHTML = number + " is not in range"; else document.getElementById("output").innerHTML = number + " is in range"; } </script> </body> </html>
单击"单击我"按钮后,如输出窗口所示,窗口将要求您输入一个数字。
在提示框中输入数字后,您将知道它是否在给定范围内。
尝试输入不同的数字来检查数字是否在 1 到 10 的范围内。如示例所示,如果我们输入 1 到 10 之间的任何数字,则输出为真。上面的示例检查 3 个条件:第一,数字不是空值;第二,它不小于 1;第三,它大于 10。
示例
我们也可以按如下所示编写上述代码,它也将给出相同的输出
<!DOCTYPE html> <html> <body> <div> <h3>Display Message if number is in Range</h3> <p>Click the below button to enter number.</p> <button onclick="display()"> click me </button> <p id="message"></p> </div> <script> function display() { const number = prompt('Please enter a number:'); if (number >= 1 && number <= 10) document.getElementById("message").innerHTML = number + " is in range"; else document.getElementById("message").innerHTML = number + " is not in range"; } </script> </body> </html>
注意- 我们可以使用此功能对表单进行验证,例如,如果我们想对从给定数据中选择出生日期进行验证,或者在给定选项时选择从 0 到 9 的任何整数答案。