0

estoy realizando un programa en javascript que calcula cantidades de articulos, y tengo un fallo justo a la hora de emplear decimales, como veis en mi codigo, usa parseFloats para que no me de problemas a la hora de usarlos, sin embargo, me saca como resultado decimales excesivamente largos, mi segundo problema también es que al intentar aplicar un descuento, y luego procedo a borrar los articulos tras ello, me saca por pantalla decimales aún mas largo y no retorna la cantidad a 0 cuando elimino los productos sino que me saca numeros negativos muy extraños ¿sabeis a que puede deberse estos errores? he intentado solucionarlo haciendo uso de toFixed(2), pero no se si es que o los coloco mal o no me funcionan, los he quitado del codigo, pero los usaba en todos los calculos.

//INSERTAR DATOS: Agregamos función click al identificador agregarLinea
$(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 = $("#precio-unitario").val();
        $valorDescuento = $("#descuento").val();
        $valorTotal = $("#total-linea").val();

        //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>"
        );
        //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($cantidadActualizada);
        //calculamos el iva y lo sumamos a la factura del producto/s
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        $("#iva").text($iva);
        $totalFact = $cantidadActualizada + $iva;
        $("span#total").text($totalFact);
        //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);
        $("#base-imponible").text($cantidadActualizada);
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        $("#iva").text($iva);
        //igualamos a 0 la factura
        $totalFact = $cantidadActualizada + $iva;
        $("span#total").text($totalFact);
        $(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 = $("#precio-unitario").val();
        //aplicamos el descuento
        $valorDescuento = $("#descuento").val();
        //calculamos
        $("#total-linea").val($valorCantidad * $valorPrecioUnitario * (1 - $valorDescuento / 100));

    });

    //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);
        });
        $refreshAmount = 0;
        $iva = 0;
        $('.valorTotal').each(function () {
            $parse = parseFloat($(this).text());
            $refreshAmount += $parse;
            $("#base-imponible").text($refreshAmount);
    
        });
        $iva = ($refreshAmount * 1.21) - $refreshAmount;
        $("#iva").text($iva);
        $totalFact = $refreshAmount + $iva;
        $("span#total").text($totalFact);

    });
    
})
<!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>Práctica 2 | DWC | Grupo Studium</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>

1 respuesta 1

2

Para arreglar decimales con JS es sencillo usando la Funcion toFixed()

 $totalFact = $refreshAmount + $iva;
 $("span#total").text(parseFloat($totalFact).toFixed(2));

Dicha Funcion recibe un parametro que es la cantidad de decimales que necesitas

Usando tu codigo imprimirá algo asi:

//7.26€ 

Te dejo tu código modificado:

<!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>Práctica 2 | DWC | Grupo Studium</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-5">
                    <h3></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>
        
    </body>
</html>
<script type="text/javascript">
$(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 = $("#precio-unitario").val();
        $valorDescuento = $("#descuento").val();
        $valorTotal = $("#total-linea").val();

        //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>"
        );
        //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;
        var total_iva=parseFloat($iva).toFixed(2);
        $("#iva").html(total_iva<0?0:total_iva);
        $totalFact = $cantidadActualizada + $iva;
        $("span#total").text(parseFloat($totalFact).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);
        var total_base=parseFloat($cantidadActualizada).toFixed(2);

        $("#base-imponible").html(total_base<0?0:total_base);
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        var total_iva=parseFloat($iva).toFixed(2);

        $("#iva").html(total_iva<0.001?0:total_iva);
        //igualamos a 0 la factura
        $totalFact = $cantidadActualizada + $iva;
        var 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 = $("#precio-unitario").val();
        //aplicamos el descuento
        $valorDescuento = $("#descuento").val();
        //calculamos
        $("#total-linea").val($valorCantidad * $valorPrecioUnitario * (1 - $valorDescuento / 100));

    });

    //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);
        });
        $refreshAmount = 0;
        $iva = 0;
        $('.valorTotal').each(function () {
            $parse = parseFloat($(this).text());
            $refreshAmount += $parse;
            var total_base=parseFloat($refreshAmount).toFixed(2);
            $("#base-imponible").html(total_base<0?0:total_base);
    
        });
        $iva = ($refreshAmount * 1.21) - $refreshAmount;
        var total_iva=parseFloat($iva).toFixed(2);
        $("#iva").html(total_iva<0?0:total_iva);
        $totalFact = $refreshAmount + $iva;

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

    });
    
})

</script>

10
  • 1
    Agrega 3 productos donde cantidad, precio y descuento sean 1 (el precio total debería dar 0.99). Luego borralos, y notarás como aparece el segundo error que comenta el 7 dic. 2021 a las 20:33
  • 2
    He actualizado el script, coloque 4 productos que todos daban 0.99 y los borre y al parecer no me da error, deje el codigo aca jsfiddle.net/nrwkp1fx para que prueben y me digan donde da error :) el 7 dic. 2021 a las 20:42
  • 1
    Efectivamente, ya no aparece el error. ;) el 7 dic. 2021 a las 20:52
  • 1
    Entiendo, ya modifique el script con esa validación el 7 dic. 2021 a las 21:12
  • 1
    Para ayudarnos, saludos! :D el 7 dic. 2021 a las 21:25

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.