I'm trying to calculate the amount of money a person would pay by using some specific coupon and getting a discount. I have the array with the coupons, and i have the switch. But i can't get the number of the final price, it always returns NaN. i get results like this:

"El precio con descuento es de $:NaN".

function descuentoPorCupones(precio, discount) {   
    const porcentajeAPagar = 100 - discount;
    const precioFinal = precio * porcentajeAPagar / 100;

    return precioFinal;
}



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

    const inputCoupon = document.getElementById("inputCoupon");
    const couponValue = inputCoupon.value;


    const precioFinal = descuentoPorCupones(priceValue, couponValue);     



    const resultado = document.getElementById("inputResultado");
    resultado.innerText = "El precio con descuento es de $:"   precioFinal;



    let descuento;


    switch(true) {
      case couponValue === "super_promo":
        descuento = 15;
        inputResultado = descuentoPorCupones(priceValue, descuento);
        inputResultado.innerText =`El precio con descuento es de: $${precioFinal} dolores`
      break;
      case couponValue === "promo_del_mes":
        descuento = 25;
        inputResultado = descuentoPorCupones(priceValue, descuento);
        inputResultado.innerText =`El precio con descuento es de: $${precioFinal} dolores`
      break;
      case couponValue === "primer_martes_del_mes":
        descuento = 25;
        inputResultado = descuentoPorCupones(priceValue, descuento);
        inputResultado.innerText =`El precio con descuento es de: $${precioFinal} dolores`
      break;
      default:
        inputResultado.innerText = "el cupón ingresado no es valido"
    }


    const prueba = descuentoPorCupones (priceValue, couponValue, descuento)
    return prueba

}

const coupon = [
    {
        name: "super_promo",
        discount: 15,
    },
    {
        name: "promo_del_mes",
        discount: 25,
    },
    {
        name: "primer_martes_del_mes",
        discount: 30,
    },
]

        <header>
            <h1>Precios y Descuentos</h1>
            <p>Página dedicada a que yo practique.</p>
        </header>
    
        <form>
    
            <label for="inputPrice">Ingrese el precio del producto</label>
            <input id="inputPrice" type="text"/>
            
            <label for="inputCoupon">Ingrese el cupon a utilizar</label>
            <input id="inputCoupon" type="text"/>
    
    
            <button type="button" onclick="onclickButtonCalcular()">
                Calcular precio a pagar
            </button>
    
            <p id="inputResultado"></p> 
    
        </form>

I've checked other similar questions but i couldn't find anyone that adjust to my code

CodePudding user response：

The problem is that you're using couponValue (the value of the coupon input) as a number, but it's the name of a coupon. You should be looking up the coupon in coupon (which should be coupons, plural) and using its discount property. (credits to T.J Crowder)

Method 1

• I have not used the array of coupons.
• Codepen for method 1 is here.

function descuentoPorCupones(precio, discount) {   
    const porcentajeAPagar = 100 - discount;
    const precioFinal = precio * porcentajeAPagar / 100;
    return Number(precioFinal);
}



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

    const inputCoupon = document.getElementById("inputCoupon");
    const couponValue = inputCoupon.value;

    let descuento;
  
  const resultado = document.getElementById("inputResultado");
    
  
    switch(true) {
      case couponValue === "super_promo":
        descuento = 15;
        inputResultado = descuentoPorCupones(priceValue, descuento);
        resultado.innerText =`El precio con descuento es de: $${inputResultado} dolores`
      break;
      case couponValue === "promo_del_mes":
        descuento = 25;
        inputResultado = descuentoPorCupones(priceValue, descuento);
        resultado.innerText =`El precio con descuento es de: $${inputResultado} dolores`
      break;
      case couponValue === "primer_martes_del_mes":
        descuento = 25;
        inputResultado = descuentoPorCupones(priceValue, descuento);
        resultado.innerText =`El precio con descuento es de: $${inputResultado} dolores`
      break;
      default:
        resultado.innerText = "el cupón ingresado no es valido"
    }

}

Method 2

• For this method, I have used the array of coupons that you have given
• Codepen for this is here.

function descuentoPorCupones(precio, discount) {   
    const porcentajeAPagar = 100 - discount;
    const precioFinal = precio * porcentajeAPagar / 100;
    return Number(precioFinal);
}

const coupon = [
    {
        name: "super_promo",
        discount: 15,
    },
    {
        name: "promo_del_mes",
        discount: 25,
    },
    {
        name: "primer_martes_del_mes",
        discount: 30,
    },
]

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

    const inputCoupon = document.getElementById("inputCoupon");
    const couponValue = inputCoupon.value;

    let inputResultado;
  
  const resultado = document.getElementById("inputResultado");
  
    coupon.forEach((couponCode) => {
      if (couponCode.name === couponValue) {
        inputResultado = descuentoPorCupones(priceValue,couponCode.discount);
      }
    });
  if (inputResultado === undefined) {
    resultado.innerText = "el cupón ingresado no es valido"
  } else {
    resultado.innerText = `El precio con descuento es de: $${inputResultado} dolores`
  }

}