1

estoy realizando un programa en javascript de compra de artículos, no me agrega los artículos que tienen costo decimal, y además me iguala a 0 el total a pagar, he intentado colocarlo todo el parseFloat en lugar de parseInt, pero me salen muchísimos decimales además de que cuando empiezo a borrarlo todo, me salen en negativo, todo bastante raro, alguno sabe que puede estar fallando. Adjunto mi codigo a continuación para que veáis como tengo estructurada la lógica de mi programa, el resto de los calculos si son por ejemplo decimales tipo 1.25 o 1.50, me los calcula perfecto, el problema viene cuando inserto un decimal el cual es menor a 1, es decir, cualquier cantidad que sea menor a 0.99. Por otro lado, si intento darle a aplicar descuento a todas las lineas, cuando hay una cantidad asi, me lo iguala todo a 0 la factura total.

//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 = parseInt($("#base-imponible").text()) + parseInt($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 = parseInt($("#base-imponible").text()) - parseInt($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 = parseInt($valorCantidad) * parseInt($valorPrecioUnitario) * (1 - parseInt($descuentoLineas) / 100);
            $(this).children('.valorTotal').text($valorTotal);
        });
        $cantidadActualizada = 0;
        $iva = 0;
        $('.valorTotal').each(function () 
        {
            $parse = parseInt($(this).text());
            $cantidadActualizada += $parse;
            $("#base-imponible").text($cantidadActualizada);

        });
        $iva = ($cantidadActualizada * 1.21) - $cantidadActualizada;
        $("#iva").text($iva);
        $totalFact = $cantidadActualizada + $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

0

parseInt devuelve 0 para números inferiores a 1, para los decimales deberías usar parseFloat.

Mi recomendación es que para trabajar con precios uses siempre valores enteros multiplicando por 100 los precios y, al momento de mostrarlos en la interfaz, dividirlos entre 100 y usando toFixed(2) para tener dos posiciones decimales. Eso si, si usas .valorTotal para leer los valores en decimal volveras a tener los problemas con parseFloat, prueba a almacenar en un atributo el valor sin decimales. ¡Y no te olvides de redondear cuando uses dividas enteros!

El problema de los decimales viene porque JavaScript usa números en coma flotante, esto implica que hay decimales que no se pueden representar. Por esto te aparecen muchos decimales, porque es el número más próximo que puede representar.

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.