This JS function returns NaN instead of number

Question

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

Now is a good time to start using your browser's script debugger. You can place breakpoints in the code and step through it line by line as it executes, observing the values of your variables and the result of each individual operation. When you do this, which is the first operation to produce an unexpected result? What were the values used at the time? What was the result? What result was expected? Why? — David, May 02 '22 at 12:40
Not to undermine the valuable comment by David, but the .value of an input is not a number. — , May 02 '22 at 12:41
Re @David's comment, see [this](https://stackoverflow.com/questions/25385173/) and [this](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/). Re Chris', see [this](http://stackoverflow.com/questions/32945779/incorrect-result-in-javascript-calculation/32945816#32945816). You're currently relying on implicit conversion from string to number, but it appears that some of the text can't be converted to number, so that conversion ends up being `NaN`. — T.J. Crowder, May 02 '22 at 12:42
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. — T.J. Crowder, May 02 '22 at 12:46
@TJ Crowder's answer is correct, you should `parseInt` or `parseFloat` (depending on if you are allowing decimals or not) and handle a parsing error. The _best_ way to do this would be to sanitize user input and prevent your function from running if the user didn't enter a parse-able string (if they input `"banana"` then you want to give them a helpful error message and prevent your script from trying to subtract `100 - "banana"`). There's also an `` which will have a value of number type. — rook218, May 02 '22 at 12:48

score 1 · Accepted Answer · answered May 02 '22 at 13:11

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`
  }

}

This JS function returns NaN instead of number

1 Answers1

Method 1

Method 2