Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display Message When Number is in 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
In the example below, we check if the entered number is in range 1 to 10 and also display 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>
As shown in the output window after clicking the “click me” button, the window will ask you to enter a number.
After entering a number in the prompt box you will get to know whether it lies in between the given range or not.
Try entering different numbers to check whether numbers are in the range 1 to10 or not. As shown in the example the output is true if we enter any number between 1 to10. The example above checks for 3 conditions first the number is not a null value, second, it is not less than 1 and third it is greater than 10.
Example
We can also write the above code as shown below and it will also give the same output
<!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>
Note We can use this feature for putting validation on the forms like if we want to put a validation for choosing the date of birth out of a given data or while given options for choosing any integer answer from 0 to 9.
792 Views
