如何使用 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 的任何整数答案。
