Avoid Nan in a javascript code

Navigation
1

I have this code but if I do not enter a value when executing the script I see NaN , I would like it not to appear and it will show me an alert that the field is empty. 

function descuento() { 
  var n1 = parseInt(document.calculator.numero1.value);
  document.calculator.resultado.value="$ "+(n1-n1*.15).toFixed() + " Pesos"; 
}
<div class="calculadora">
  <form name="calculator"> 
    <div class="botones">	
      <input class="boton1" type="button" value="DESCUENTO" onclick = "descuento()">
    </div>
    <div class="parrafo"></div>
    <div class="anuncio">
      <span>15% Descuento, Disponible al 30 de Septiembre</span>
    </div>
    <div class="centrado">
      <div class="caja-calculadora">
        <div class="caja-precio">
          <div class="signo">$</div>
          <input class="precio" id="precio" type="text" name="numero1" value=""><br>
        </div>
        <div class="anuncio">Precio de Catalogo</div>		
        <div class="linea">

        <div class="anuncio2">TOTAL A PAGAR</div>

      </div>
      <div class="caja-resultado">
        <div class="signo2"><input class= "resultado" id="resultado" 	type="text" name="resultado" disabled></div>	
      </div>
      </div>
    </div>
  </form> 
</div>
    
asked by AQUILES BAILO BUENO 03.09.2018 в 22:05
source

3 answers

5

You can use the isNaN() native javascript function to check if it's not a number.

For example: 

isNaN(NaN) //devuelve true
isNaN("string") //devuelve true
isNaN("12") //devuelve false
isNaN(12) //devuelve false

In your code you could use it in the following way within the function: 

function descuento() { 
  var n1 = parseInt(document.calculator.numero1.value);
  
  // muestro el alerta si no es un número
  if (isNaN(n1)) {
    alert('ingrese un número válido.');
  } else {
    document.calculator.resultado.value="$ "+(n1-n1*.15).toFixed() + " Pesos"; 
  }
}
<div class="calculadora">
  <form name="calculator"> 
    <div class="botones">	
      <input class="boton1" type="button" value="DESCUENTO" onclick = "descuento()">
    </div>
    <div class="parrafo"></div>
    <div class="anuncio">
      <span>15% Descuento, Disponible al 30 de Septiembre</span>
    </div>
    <div class="centrado">
      <div class="caja-calculadora">
        <div class="caja-precio">
          <div class="signo">$</div>
          <input class="precio" id="precio" type="text" name="numero1" value=""><br>
        </div>
        <div class="anuncio">Precio de Catalogo</div>		
        <div class="linea">

        <div class="anuncio2">TOTAL A PAGAR</div>

      </div>
      <div class="caja-resultado">
        <div class="signo2"><input class= "resultado" id="resultado" 	type="text" name="resultado" disabled></div>	
      </div>
      </div>
    </div>
  </form> 
</div>
    
answered by 03.09.2018 / 22:23
source
0

NaN is the diminutive of Not a Number and is created when you tried to make parse (parseInt) something that was not a number so it returns that value to you. Before using a value as a number that is entered by a user, I recommend checking if this is a number or not with the following function: 

function esNumero(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
    
answered by 03.09.2018 в 22:17
0

(+document.calculator.numero1.value || 0) Just insert + and you decide that it must be a number, so null , undefined and false will be 0 with the comparison operator (something || other) we say that if you can not convert to a number that is 0.

That means that if the user enters anything that is not a number, even nothing, it will be as if he had entered zero. 

function descuento() { 
  var n1 = (+document.calculator.numero1.value || 0);
  document.calculator.resultado.value="$ "+(n1-n1*.15).toFixed() + " Pesos"; 
}
<div class="calculadora">
  <form name="calculator"> 
    <div class="botones">	
      <input class="boton1" type="button" value="DESCUENTO" onclick = "descuento()">
    </div>
    <div class="parrafo"></div>
    <div class="anuncio">
      <span>15% Descuento, Disponible al 30 de Septiembre</span>
    </div>
    <div class="centrado">
      <div class="caja-calculadora">
        <div class="caja-precio">
          <div class="signo">$</div>
          <input class="precio" id="precio" type="text" name="numero1" value=""><br>
        </div>
        <div class="anuncio">Precio de Catalogo</div>		
        <div class="linea">

        <div class="anuncio2">TOTAL A PAGAR</div>

      </div>
      <div class="caja-resultado">
        <div class="signo2"><input class= "resultado" id="resultado" 	type="text" name="resultado" disabled></div>	
      </div>
      </div>
    </div>
  </form> 
</div>
    
answered by 04.09.2018 в 00:38
CRUD data with bootstrap and PHP [duplicated] Pass string to DateTime and take DateTime date only.Now [Updated]