0

Mi función me devuelve un NaN y no debería. lo que debería hacer es calcular el precio de un producto con un descuento y el descuento de un cupón el cual ya fue declarado. La función que calcula el primer descuento con una regla de tres funciona bien pero la función onClickDescuentoCupon me devuelve un NaN y no sé por qué:

function calcularPrecioConDescuento(precio, descuento){ //calcula con una regla de tres el descuento

       const porcentajeDescuento = 100 - descuento;
       const precioConDescuento  = (porcentajeDescuento * precio)/100
       return precioConDescuento
}

function onClickButtonPriceDiscount(){ //imprime en html la función anterior
     const inputPrice    = document.getElementById('inputPrice');
     const priceValue    = inputPrice.value; 

     const inputDiscount = document.getElementById('inputDiscount');
     const discountValue = inputDiscount.value;

     const precioFinal = calcularPrecioConDescuento(priceValue, discountValue);
     const resultP     = document.getElementById('ResultP');
     resultP.innerText = 'Tu descuento es de: ' + precioFinal + '%';
}

const cupones = ['ANA ', ' ES ', ' UNA ', ' AVENGER '];
function CuponesTiendaVirtualResultado(){ //muestra los cupones disponibles en la tienda virtual
     const resultadoCuponesDisponibles = document.getElementById('CuponesD');
     resultadoCuponesDisponibles.innerHTML = 'los cupones disponibles en la tienda son: ' + cupones;
}

function onClickDescuentoCupon(){

     const inputPrice    = document.getElementById('inputPrice');
     const priceValue    = inputPrice.value; 

     const inputCupon    = document.getElementById('inputCupon');
     const valueCupon    = inputCupon.value; 

     let descuento;
     switch(valueCupon){
          case cupones[0]:
               descuento = 20;
          break;
          case cupones[1]:
               descuento = 15;
          break;
          case cupones[2]:
               descuento = 50;
          break;
          case cupones[3]:
               descuento = 60;     
     }

const precioConDescuentoCupones = calcularPrecioConDescuento(priceValue, descuento);
const resultadoDC     = document.getElementById('resultadoDC');
resultadoDC.innerHTML = 'el precio final de tu producto es de $ ' + precioConDescuentoCupones;
} 

3 respuestas 3

1

Como bien dice @mishrole, el problema es que si no se cumple ninguna de las opciones del switch, la variable descuento que has declarado con let descuento; tiene un valor de "undefined", cuando esa variable la envías a la función calcularPrecioConDescuento, siempre te devolverá NaN. Para evitar eso, declárala con valor 0 y si alguna opción se cumple en el switch ya le cambiará el valor, pero si no se cumple ninguna, tendrá un valor de 0 y no te dará error al realizar un cálculo con ella. let descuento = 0; Un saludo!!

0

1.- En la función calcularPrecioConDescuento faltaban los punto-y-coma finales de 2 líneas

2.- En la función onClickDescuentoCupon te ha faltado poner un break en el último caso

3.- Intenta usar comillas dobles para insertar texto en los inputs de funciones

Aquí esta el código:

function calcularPrecioConDescuento(precio, descuento){ //aca faltaba punto y coma

   const porcentajeDescuento = 100 - descuento;
   const precioConDescuento  = (porcentajeDescuento * precio)/100;
   return precioConDescuento;
}

function onClickButtonPriceDiscount(){ //imprime en html la función anterior
 const inputPrice    = document.getElementById("inputPrice");
 const priceValue    = inputPrice.value; 

 const inputDiscount = document.getElementById("inputDiscount");
 const discountValue = inputDiscount.value;

 const precioFinal = calcularPrecioConDescuento(priceValue, discountValue);
 const resultP     = document.getElementById("ResultP");
 resultP.innerText = "Tu descuento es de: " + precioFinal + "%";
}

const cupones = ['ANA ', ' ES ', ' UNA ', ' AVENGER '];
function CuponesTiendaVirtualResultado(){ //muestra los cupones disponibles en la tienda virtual
 const resultadoCuponesDisponibles = document.getElementById("CuponesD");
 resultadoCuponesDisponibles.innerHTML = "los cupones disponibles en la tienda son: " + cupones;
}

function onClickDescuentoCupon(){

 const inputPrice    = document.getElementById("inputPrice");
 const priceValue    = inputPrice.value; 

 const inputCupon    = document.getElementById("inputCupon");
 const valueCupon    = inputCupon.value; 

 let descuento;
 switch(valueCupon){
      case cupones[0]:
           descuento = 20;
      break;
      case cupones[1]:
           descuento = 15;
      break;
      case cupones[2]:
           descuento = 50;
      break;
      case cupones[3]:
           descuento = 60;
        break;     
 }

 const precioConDescuentoCupones = calcularPrecioConDescuento(priceValue, descuento);
 const resultadoDC     = document.getElementById("resultadoDC");
 resultadoDC.innerHTML = "el precio final de tu producto es de $ " + precioConDescuentoCupones;
 }
0

Es probable que el valor de valueCupon no sea ninguno de los posibles valores del arreglo cupones cuando se llama a la función onClickDescuentoCupon. Según este arreglo, los cupones válidos son:

  • ANA en mayúsculas y con un espacio al final
  • ES en mayúsculas y con un espacio antes y después
  • UNA en mayúsculas y con un espacio antes y después
  • AVENGER en mayúsculas y con un espacio antes y después

De este modo, cuando llega al switch, valueCupon no cumple con ninguno de los casos y el resultado es NaN. Si añades un caso default, dejará de darte NaN, pero siempre entrará a ese caso a menos que el cupón sea ingresado tal cual se encuentra en el arreglo.

A menos que sea obligatorio que el cupón cuente con estos espacios, sugiero los remuevas en el arreglo, dado que los cupones generalmente no contienen espacios; también es recomendable que controles posibles espacios de más en el input#inputCupon utilizando trim.

En onClickDescuentoCupon(), valueCupon quedaría así:

const valueCupon = inputCupon.value.trim();

Y el arreglo cupones quedaría así:

const cupones = ['ANA', 'ES', 'UNA', 'AVENGER'];

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.