Given the HTML document. The task is, while taking input a number from the user via input element, verify that the number is in the specified range. If it is not then changing it to within the range. Here 2 approaches are discussed with the help of JavaScript.
Approach 1:
- Take the input from the input element and convert it to number using Number() method.
- Use IF-ELSE Condition to verify if it is in range or not?
- If the number is less than the minimum value then give it the minimum value else if.
- If the number is greater than the maximum value then give it the maximum value else the number is in the range itself.
Example 1: This example implements the above approach.
html
<head> <script src= </script> </head> <body> <h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"> </p> Enter a Number: <input id="num" /> <br> <br> <button onclick="GFG_Fun();"> click here </button> <p id="GFG_DOWN"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); up.innerHTML = "Click on the button to check if the types number"+ " is in range or not.<br>Min Value - 0 <br> Max Value - 100"; function GFG_Fun() { var input = document.getElementById('num'); var n = input.value; n = Number(n); if (n < 0) { $('#GFG_DOWN').html('Type number between 0-100'); input.value = 0; } else if (n > 100) { $('#GFG_DOWN').html('Type number between 0-100'); input.value = 100; } else { $('#GFG_DOWN').html('You typed the valid Number.'); input.value = n; } } </script> </body> |
Output:
How to limit a number between a min/max value in JavaScript ?
Approach 2:
- Take the input from the input element and convert it to number using Number() method.
- Use Math.max and Math.min method to verify if it is in range or not?
- If the number is less than the minimum value then give it the minimum value else if.
- If the number is greater than the maximum value then give it the maximum value else the number is in the range itself.
Example 2: This example implements the above approach.
html
<head> <script src= </script> </head> <body> <h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"> </p> Enter a Number: <input id="num" /> <br> <br> <button onclick="GFG_Fun();"> click here </button> <p id="GFG_DOWN"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); up.innerHTML = "Click on the button to check if the types number "+ "is in range or not.<br>Min Value - 0 <br> Max Value - 100"; function GFG_Fun() { var input = document.getElementById('num'); var n = input.value; n = Number(n); n = Math.min(100, Math.max(0, n)); $('#GFG_DOWN').html('Number ranged to <br>N = ' + n); } </script> </body> |
Output:
How to limit a number between a min/max value in JavaScript ?
