0

¡Hola! No hay nada más allá del título, quiero pedir un número y luego de ser ingresado en el campo pretendo poder mostrar la cantidad de dígitos que lo compone. Por ejemplo, si se ingresa 50, entonces la cantidad de dígitos es 2, si se ingresa 100, entonces es 3 y así.

Estoy usando la librería jQuery y quería implementarle una estructura repetitiva de algún tipo, más que nada porque para saber la cantidad de digitos debo dividir el número entre diez de manera sucesiva hasta que el resultado me de menor a uno.

Me parece que no está del todo bien esta implementación:

$("#btnIngresar").click(determinarDigitos);
function determinarDigitos(){
    let entero = Number($("#txtEntero").val());
    let division = entero / 10;
    while(division < 1){
        console.log(division);
        division++;
    }
}

Les puedo dejar el código HTML de referencia:

<body>
    <label for="txtEntero">Número:</label>
    <input type="text" id="txtEntero">
    <input type="button" value="Ingresar" id="btnIngresar">
    <p id="pResultado"></p>
</body>
</html>
4
  • quieres saber la longitud de la cadena? no entiendo lo de los digitos?
    – hawks
    el 9 may. 2020 a las 23:49
  • Mi intención es mostrarle al usuario la cantidad de dígitos que componen al número, por ejemplo, si se ingresa 100, entonces la cantidad de dígitos sería 3 y así.
    – disabled
    el 9 may. 2020 a las 23:50
  • Pues entonces a la variable que almacena tu número muéstrale la longitud con la propiedad length y no haría falta tratarlo como número, así como llega como string. Usa la propiedad que te digo y te dura por ekeno de 5 será 1 y de 10 sería 2... Al menos eso entendí
    – user128299
    el 9 may. 2020 a las 23:59
  • Por ejemplo con puro js sería console.log("123".length) y da 3
    – user128299
    el 10 may. 2020 a las 0:03

1 respuesta 1

1

El problema de tu codigo es que no estas teniendo en cuenta que Number() solo convierte aquello que puede convertir a un numero, pero si por ejemplo la cadena de texto comienza con una letra y no con un numero, el resultado almacenado sera NaN, lo cual sospecho que no es lo que deseas.

let entero = Number($("#txtEntero").val());

Esto mismo no lo estas teniendo en cuenta en la división... porque por ejemplo si el anterior resultado es un NaN entonces luego estarias dividiendo un NaN entre 10:

let division = entero / 10;

Y pues...

NaN es considerado por javascript como un numero, pero no se exactamente que numero... pero supongo que ha de ser mayor a 1, por lo que tu bucle while en los casos donde division valga NaN nunca se cumplirá:

while(division < 1){
   ...
}

Una solución a esto es comprobar primero mediante un loop si el numero ingresado contiene solo dígitos, y en caso de contener letras o algún otro tipo de caracteres no validos, simplemente retornar false, para luego advertirle al usuario que lo digitado no ha sido un numero, entonces el codigo que tienes quedaria algo asi:

const digits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "."];

function isNumericString(numericString){
   return digits.indexOf(numericString) === -1 ? false : true;
}

function isValidNumber(numericString){

  let isValid = false;
  
  for(let i = 0; i < numericString.length; i++){
    if(!isNumericString(numericString[i])) return isValid;
  }
  
  isValid = Number.isNaN(parseFloat(numericString)) ? false : true;
  return isValid;
}

$("#btnIngresar").click(determinarDigitos);
function determinarDigitos(){
    if(isValidNumber($("#txtEntero").val())){
      let entero = Number($("#txtEntero").val());
      let division = entero / 10;
      
      while(division < 1){
          console.log(division);
          division++;
      }
      
      console.log("Digitos totales:" + $("#txtEntero").val().length);
    }else{
      alert("Numero introducido no valido!");
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <label for="txtEntero">Número:</label>
    <input type="text" id="txtEntero">
    <input type="button" value="Ingresar" id="btnIngresar">
    <p id="pResultado"></p>
</body>

Como vemos no usamos una comparacion como tuNumero != NaN puesto que esto siempre devolvera true debido a que no se debe comparar NaN con NaN, miremoslo aquí si lo intentamos:

console.log(NaN !== NaN);

Como vemos eso no debería retornar true, así que la forma correcta de comprobar si un numero es NaN es usando Number.isNaN:

console.log(Number.isNaN(NaN));

La clave de tu duda, puede ser resuelta usando la propiedad length de las cadenas de texto (en tu caso porque es una cadena de texto), pero esta misma propiedad existe también en los arrays, asi que es algo para tener en cuenta...

Entonces supongamos que ya validamos que tu numero efectivamente si es un numero, entonces para almacenar su cantidad de digitos solo debemos usar la propiedad length como lo ha descrito el usuario BetaM:

const digitos = $("#txtEntero").val().length;

Recordemos que el valor que hay en un input es devuelto como cadena de texto. De ahi el poder usar la propiedad length, cabe mencionar tambien que no todos los input devuelven texto como valor, por ejemplo los input tipo number no devuelven texto, devuelven un numero directamente.

3
  • Perdoname me perdí, donde le indica la cantidad de cada cifra numérica?
    – user128299
    el 10 may. 2020 a las 0:12
  • Debajo del while.
    – Layer
    el 10 may. 2020 a las 0:13
  • 1
    Tu aporte resuelve para el OP muchas dudas , pero dado que su duda inicial es la cantidad de elementos considero debería quedar mejor identificada esa parte
    – user128299
    el 10 may. 2020 a las 0:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.