Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display a message when a given number is in the range using JavaScript?
In this article, we will check whether a number lies between a range or not and display a message according to the output we get. This feature of JavaScript allows you to put a number validation while creating a form or any other document.
Syntax
Following is the syntax to check if number is in range and display the message ?
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";
}
Here number is the input number to check if it is in the range. The lower and upper are the lower limit and upper limit of the range.
Algorithm
-
Step 1 ? Input the number using the prompt() method.
-
Step 2 ? Check for the three conditions: first if the number is NaN, second if the number is less than the lower limit of the range and third if the number is greater than the upper limit of the range.
-
Step 3 ? If any one of the above three conditions is true, display a message that the number is not in range, else display a message that the number is in range.
Example 1: Using OR Logic with NaN Check
In the example below, we check if the entered number is in range 1 to 10 and display an appropriate message.
<!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>
This example checks for three conditions: first the number is not a null value, second it is not less than 1, and third it is not greater than 10.
Example 2: Using AND Logic
We can also write the above code using AND logic, which is often more readable:
<!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 && !isNaN(number)) {
document.getElementById("message").innerHTML = number + " is in range";
} else {
document.getElementById("message").innerHTML = number + " is not in range";
}
}
</script>
</body>
</html>
Comparison of Approaches
| Approach | Logic | Readability | Best For |
|---|---|---|---|
| OR Logic | Check if NOT in range | Good | Error handling first |
| AND Logic | Check if in range | Better | Positive condition first |
Common Use Cases
This validation technique is useful for:
-
Form validation for age ranges (18-65)
-
Score validation in quiz applications (0-100)
-
Date validation for specific years
-
Product rating systems (1-5 stars)
Conclusion
Range validation is essential for user input verification in web forms. Both OR and AND logic approaches work effectively, with AND logic being more intuitive for positive validation scenarios.
911 Views
