Dado el documento HTML. La tarea es, mientras se ingresa un número del usuario a través del elemento de entrada, verificar que el número esté en el rango especificado. Si no es así, cámbielo a dentro del rango. Aquí se discuten 2 enfoques con la ayuda de JavaScript.
Enfoque 1:
- Tome la entrada del elemento de entrada y conviértala en número usando el método Number() .
- ¿ Usar la condición IF-ELSE para verificar si está dentro del rango o no?
- Si el número es menor que el valor mínimo, déle el valor mínimo de lo contrario.
- Si el número es mayor que el valor máximo, déle el valor máximo, de lo contrario, el número está en el rango mismo.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Limit a number between a min/max value
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</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" style="color: green;">
</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>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Tome la entrada del elemento de entrada y conviértala en número usando el método Number() .
- ¿ Usar el método Math.max y Math.min para verificar si está dentro del rango o no?
- Si el número es menor que el valor mínimo, déle el valor mínimo de lo contrario.
- Si el número es mayor que el valor máximo, déle el valor máximo, de lo contrario, el número está en el rango mismo.
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Limit a number between a min/max value
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</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" style="color: green;">
</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>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA