0

Buenas estoy haciendo un codigo javascript con el que agrego articulos y me calcula factura total de los productos ingresados, todo me funciona a excepción de una cosa, he conseguido identificar el error y es el botón "Agregar" y "Aplicar Descuento" pues funcionan como un href, he probado cambiarlos como un input type button, y con ese cambio funciona perfecto, pero necesito que funcione tal como viene establecido en el html, pero no logro hacer que funcione, ¿alguna idea de que esta ocurriendo? ¿porque no se quedan los productos ni me deja agregar cuantos quiera?

<!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>

//INSERTAR DATOS: Agregamos función click al identificador agregarLinea
$(document).ready(function () 
{
    $(document).on('click', '#agregarLinea', function () 
    {
        //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-linea").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-linea").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 () {
        //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);
        });

    });

})

2 respuestas 2

0

Ya lo he conseguido solucionar haciendo uso del evento preventDefault().

 $(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>"
    );
0

Añade "#" en los anchors que tienes para los botones del siguiente modo:

<td><a href="#" id="agregarLinea" class="btn btn-success">Agregar</a></td>

Y acá:

<a href="#" id="aplicarDescuento" class="btn btn-info">Aplicar descuento a todas las líneas</a></td>

edit: Si no puedes tocar el html entonces tienes que usar event.preventDefault(); en el JS

1
  • El problema es que no puedo modificar nada del HTML al parecer, por lo que tiene que ser problema de mi archivo JS o me falta algo que no consigo ver.
    – Puntoycoma
    Commented el 6 dic. 2021 a las 11:27

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.