0

Tengo acabo un programa de cálculos de cantidades de articulos, sin embargo tengo un pequeño problema, y es que necesito colocar obligatoriamente un descuento para que me salga el precio del articulo de forma automatica, sin embargo, eso no es exactamente lo que queria conseguir, puesto que sino coloco un descuento y dejo en blanco dicha casilla me sale automaticamente como NaN, ¿hay alguna forma para obviar esto?, es decir, que no me resulte estrictamente necesario que coloque un descuento y que me de el precio sin esperar a ello.

$(document).ready(function () 
{
    $(document).on('click', '#agregarLinea', function (event) 
    {
        event.preventDefault();
        //Especificamos los valores que vamos a tomar
        $valorProducto = $("#producto").val();
        $valorCantidad = $("#cantidad").val();
        $valorPrecioUnitario = parseFloat($("#precio-unitario").val()).toFixed(2);
        $valorDescuento = parseFloat($("#descuento").val()).toFixed(2);
        $valorTotal = parseFloat($("#total-linea").val()).toFixed(2);
    
        //insertamos los contenidos
        $("tbody").append("<tr class='info'>"
            + "<td> " + $valorProducto + " </td>"
            + "<td class='valorCantidad'> " + $valorCantidad + " </td>"
            + "<td class='valorPrecioUnitario'> " + $valorPrecioUnitario + " </td>"
            + "<td class='valorDescuento'> " + $valorDescuento + " </td>"
            + "<td class='valorTotal'> " + $valorTotal + " </td>"
            + "<td> <button type'button' class='borrar btn-success'> Borrar </button>"
            + "</tr>"
        );
        //Limpiamos los valores al agregar (botón)
        $("#producto").val("");
        $("#cantidad").val("");
        $("#precio-unitario").val("");
        $("#descuento").val("");
        $("#total").val("");

        //CALCULAR EL TOTAL
        //base imponible es 0 y se suma al total que inicialmente es 0, hasta que metamos un costo
        $cantidadActualizada = parseFloat($("#base-imponible").text()) + parseFloat($valorTotal);
        $("#base-imponible").text(parseFloat($cantidadActualizada).toFixed(2));
        //calculamos el iva y lo sumamos a la factura del producto/s
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        let total_iva=parseFloat($iva).toFixed(2);
        $("#iva").html(total_iva<0?0:total_iva);
        $totalFact = $cantidadActualizada + $iva;
        $("span#total").text(parseFloat($totalFact).toFixed(2));
        $('#total-linea').val($valorTotal.toFixed(2));
        
        //establecemos la fecha actual de las compras
        let date = new Date();
        let time = "Articulo: " + $valorProducto + " añadido el "
            + date.getUTCDate() + "/"
            + (date.getUTCMonth() + 1) + "/"
            + date.getUTCFullYear() + " a las "
            + date.getHours() + ":"
            + date.getMinutes() + ":"
            + date.getSeconds();
        $(".container").append("<p>" + time + "</p>");


    });

    /*BORRAR FILA*/
    //agregamos evento click al botón borrar
    $(document).on('click', ".borrar", function () {
        $valor = $(this).parent().siblings(".valorTotal").text();
        //restamos los valores de cada apartado para dejarlo todo de vuelta a 0
        $cantidadActualizada = parseFloat($("#base-imponible").text()) - parseFloat($valor); 
        let total_base=parseFloat($cantidadActualizada).toFixed(2);
        //impedimos que baje a menos de 0
        $("#base-imponible").html(total_base<0?0:total_base);
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        let total_iva=parseFloat($iva).toFixed(2);
        //impedimos que baje a menos de 0
        $("#iva").html(total_iva<0.001?0:total_iva);
        //igualamos a 0 la factura
        $totalFact = $cantidadActualizada + $iva;
        let total_mostrar=parseFloat($totalFact).toFixed(2);
        $("span#total").html(total_mostrar<0?0:total_mostrar);
        $(this).parent().parent().remove();
    });

    //ESTABLECEMOS DESCUENTO A UN PRODUCTO
    $(document).on('mouseout', "#descuento, #precio-unitario", function () 
    {
        //Tomamos cada uno de los valores de cada celda
        $valorCantidad = $("#cantidad").val();
        $valorPrecioUnitario = parseFloat($("#precio-unitario").val()).toFixed(2);
        //aplicamos el descuento
        $valorDescuento = parseFloat($("#descuento").val()).toFixed(2);
        //calculamos
        $("#total-linea").val($valorCantidad * $valorPrecioUnitario * (1 - $valorDescuento / 100));
        $("#total-linea").val(($valorPrecioUnitario - $valorDescuento).toFixed(2));
    });

    //APLICAMOS EL DESCUENTO A TODAS LAS FILAS
    $(document).on('click', "#aplicarDescuento", function (event) 
    {event.preventDefault();
        //tomamos el valor del descuento
        $descuentoLineas = $("#descuento-lineas").val();
        //leemos el valor aplicado
        $(".valorDescuento").text($descuentoLineas);

        //Calculamos el descuento
        $(".info").each(function () {
            //buscamos y leemos
            $valorCantidad = $(this).find(".valorCantidad").text();
            $valorPrecioUnitario = $(this).find(".valorPrecioUnitario").text();
            //calculamos el descuento
            $valorTotal = parseFloat($valorCantidad) * parseFloat($valorPrecioUnitario) * (1 - parseFloat($descuentoLineas) / 100);
            $(this).children('.valorTotal').text($valorTotal);
        });
        $cantidadActualizada = 0;
        $iva = 0;
        $('.valorTotal').each(function () {
            $parse = parseFloat($(this).text());
            $cantidadActualizada += $parse;
            let total_base=parseFloat($cantidadActualizada).toFixed(2);
            $("#base-imponible").html(total_base<0?0:total_base);
    
        });
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        let total_iva=parseFloat($iva).toFixed(2);
        $("#iva").html(total_iva<0?0:total_iva);
        $totalFact = $cantidadActualizada + $iva;

        let total_mostrar=parseFloat($totalFact).toFixed(2);
        $("span#total").html(total_mostrar<0?0:total_mostrar);

    });
    
})

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <title> DWC </title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-5">
                    <h3>Introducción de productos en la factura</h3>
                    <table class="table table-striped mt-4">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th>Cantidad</th>
                                <th>Precio unitario</th>
                                <th>Descuento (%)</th>
                                <th>Precio total</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input class="form-control" type="text" name="producto" id="producto" /></td>
                                <td><input class="form-control" type="number" name="cantidad" id="cantidad" /></td>
                                <td><input class="form-control" type="text" name="precio-unitario" id="precio-unitario" /></td>
                                <td><input class="form-control" type="text" name="descuento" id="descuento" /></td>
                                <td><input class="form-control" type="text" name="total-linea" id="total-linea" readonly /></td>
                                <td><a href="" id="agregarLinea" class="btn btn-success">Agregar</a></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td class="text-right" colspan="4">Base imponible</td>
                                <td class="text-right"><span id="base-imponible">0</span>€</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="text-right" colspan="4" data-iva="0.21">IVA 21%</td>
                                <td class="text-right"><span id="iva">0</span>€</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><input class="form-control" type="text" name="descuento-lineas" id="descuento-lineas" placeholder="%" /></td>
                                <td colspan="2"><a href="" id="aplicarDescuento" class="btn btn-info">Aplicar descuento a todas las líneas</a></td>
                                <td class="text-right"><strong>Total factura</strong></td>
                                <td class="text-right"><strong><span id="total">0</span>€</strong></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src='facturas.js'></script>
    </body>
</html>

2 respuestas 2

1

Tienes dos opciones:
Poner un valor por defecto al campo descuento

<td><input class="form-control" type="text" name="descuento" id="descuento" value="0" /></td>   

Y la otra en el código puedes detectar si la variable del $valorDescuento está vacia (isNaN). Donde pones aplicamos el descuento, más o menos linea 85

       $valorDescuento = parseFloat($("#descuento").val()).toFixed(2);
       if(isNaN($valorDescuento)){
           $valorDescuento ='0';
           }

De esa manera si el $valorDescuento está vacío pues lo pones a 0. Cualquiera de los dos te funcionará. EDITO
Repasando la solución he visto algún que otro error.
toFixed es usado con strings
se repiten algunas lineas
no calcula el precio total
Así que lo he modificado un poco más. Para no andar parcheando he creado una función que determina si el valor es NaN y lo convierte en '0'. Se usa allí donde es posible obtener un NaN y no interesa.
Como es mucho te dejo la pagína con el script funcinando, está documentada. Los comentarios añadidos comienzan con XCD para facilitarte la búqueda.

1
  • Ambas opciones que me habéis colocado me ha servido, ojala pudiera daros por aceptada ambas, muchas gracias a ambos :)!
    – Puntoycoma
    el 15 dic. 2021 a las 12:32
1

Comprueba si hay un valor en la casilla de descuento antes de hacerle parseFloat. En caso de no haber, considera descuento cero y puedes hacer los cálculos sin problema.

$valorDescuento = $("#descuento").val() ? parseFloat($("#descuento").val()).toFixed(2) : 0;

Además, no estaría mal capturar los posibles errores por NaN, no sólo para el descuento sino para todos los datos numéricos con los que trabajas.

1
  • 1
    Muchísimas gracias, también me ha servido tu respuesta.
    – Puntoycoma
    el 15 dic. 2021 a las 12:32

Tu Respuesta

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

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