0

Tengo un problema con este código al ingresar un dato en el input precio unitario y luego agregar la cantidad en el total muestra el resultado eso esta todo ok el problema es que si borro todo el dato del input precio unitario me sale NaN.

function agregarFila() {
            var tabla = document.getElementById('tablaProductos').getElementsByTagName('tbody')[0];
            var nuevaFila = tabla.insertRow();
            
            var celdaDetalle = nuevaFila.insertCell(0);
            var celdaPrecio = nuevaFila.insertCell(1);
            var celdaCantidad = nuevaFila.insertCell(2);
            var celdaCliente = nuevaFila.insertCell(3);
            var celdaMetodoPago = nuevaFila.insertCell(4);
            var celdaFuenteDinero = nuevaFila.insertCell(5);
            var celdaTotalFila = nuevaFila.insertCell(6);
            var celdaAcciones = nuevaFila.insertCell(7);
            
            celdaDetalle.innerHTML = '<input type="text" class="form-control input-producto" name="detalleProducto[]" required>';
            celdaPrecio.innerHTML = '<input type="text" class="form-control input-precio" name="costo[]" oninput="formatoMoneda(this); calcularTotalFila(this);" required>';
            celdaCantidad.innerHTML = '<input type="number" class="form-control input-cantidad-pequeno" name="cantidad[]" oninput="calcularTotalFila(this)" required>';
            celdaCliente.innerHTML = '<input type="text" class="form-control" name="clienteProducto[]" required>';
            celdaMetodoPago.innerHTML = `
                <select class="form-control" name="metodoPago[]" required>
                    <option value="Transferencia">Transferencia</option>
                    <option value="Efectivo">Efectivo</option>
                    <option value="QR">QR</option>
                </select>`;
            celdaFuenteDinero.innerHTML = `
                <select class="form-control" name="fuenteDinero[]" required>
                    <option value="Dinero Personal">Dinero Personal</option>
                    <option value="Adelanto del Cliente">Adelanto del Cliente</option>
                    <option value="Préstamo">Préstamo</option>
                    <option value="Crédito">Crédito</option>
                </select>`;
            celdaTotalFila.innerHTML = '<input type="text" class="form-control" name="totalFila[]" readonly>';
            celdaAcciones.innerHTML = '<button type="button" class="btn btn-danger" onclick="eliminarFila(this)">Eliminar</button>';
        }
    
        function eliminarFila(btn) {
            var fila = btn.parentNode.parentNode;
            fila.parentNode.removeChild(fila);
            calcularTotalGeneral();
        }
    
        function calcularTotalFila(element) {
            var fila = element.parentNode.parentNode;
            var cantidadInput = fila.querySelector('input[name="cantidad[]"]');
            var cantidad = cantidadInput.value.trim() === '' ? 0 : parseFloat(cantidadInput.value.trim());
            var costoInput = fila.querySelector('input[name="costo[]"]');
            var costo = costoInput.value.trim() === '' ? 0 : parseFloat(costoInput.value.trim().replace(/\./g, '').replace(',', '.'));
            var totalFila = fila.querySelector('input[name="totalFila[]"]');
    
            if (!isNaN(cantidad) && !isNaN(costo)) {
                var total = cantidad * costo;
                totalFila.value = total.toLocaleString('es-PY', { minimumFractionDigits: 0 });
            } else {
                totalFila.value = ''; // Setear el valor a vacío si no se puede calcular el total
            }
            calcularTotalGeneral();
        }
    
        function calcularTotalGeneral() {
            var totalGeneral = 0;
            var totalFilas = document.querySelectorAll('input[name="totalFila[]"]');
            totalFilas.forEach(function(totalFila) {
                if (totalFila.value) {
                    var valorNumerico = parseFloat(totalFila.value.replace(/\./g, '').replace(',', '.'));
                    totalGeneral += valorNumerico;
                }
            });
            document.getElementById('total').value = totalGeneral.toLocaleString('es-PY', { minimumFractionDigits: 0 });
        }
    
        function formatoMoneda(input) {
            var valor = input.value.replace(/\./g, '').replace(',', '.');
            input.value = parseFloat(valor).toLocaleString('es-PY', { minimumFractionDigits: 0 });
        }
body, html {
    height: 100%;
    margin: 10px; /* Añade un margen de 10px a todos los lados */
}
.container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.input-producto {
    width: 200px; /* Ancho personalizado para el input de producto */
}
.input-precio {
    width: 100px; /* Ancho personalizado para el input de precio */
}
.input-cantidad-pequeno {
    width: 50px; /* Ancho personalizado para el input de cantidad */
}
.col-total {
    width: 120px; /* Ancho personalizado para la columna de Total */
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Registro de Gastos</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>
<div class="container-fluid mx-3">
    <h2 class="mb-4">Formulario de Registro de Gastos</h2>
    <form>
        <div class="form-group">
            <label for="fecha">Fecha de Registro</label>
            <input type="date" class="form-control" id="fecha" name="fecha" required>
        </div>
        <div class="form-group">
            <label for="origenCompra">Proveedor / Lugar de Compra</label>
            <input type="text" class="form-control" id="origenCompra" name="origenCompra" required>
        </div>

        <div class="form-group">
            <h4>Detalle de Productos</h4>
            <div class="table-responsive">
                <table class="table table-bordered" id="tablaProductos">
                    <thead class="thead-dark">
                        <tr>
                            <th>Producto</th>
                            <th>Precio Unitario</th>
                            <th class="col-1">Cantidad</th>
                            <th>Cliente</th>
                            <th>Método de Pago</th>
                            <th>Fuente del Dinero</th>
                            <th class="col-total">Total</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" class="form-control input-producto" name="detalleProducto[]" required></td>
                            <td><input type="text" class="form-control input-precio" name="costo[]" oninput="formatoMoneda(this); calcularTotalFila(this);" required></td>
                            <td class="col-1"><input type="number" class="form-control input-cantidad-pequeno" name="cantidad[]" oninput="calcularTotalFila(this)" required></td>
                            <td><input type="text" class="form-control" name="clienteProducto[]" required></td>
                            <td>
                                <select class="form-control" name="metodoPago[]" required>
                                    <option value="Transferencia">Transferencia</option>
                                    <option value="Efectivo">Efectivo</option>
                                    <option value="QR">QR</option>
                                </select>
                            </td>
                            <td>
                                <select class="form-control" name="fuenteDinero[]" required>
                                    <option value="Dinero Personal">Dinero Personal</option>
                                    <option value="Adelanto del Cliente">Adelanto del Cliente</option>
                                    <option value="Préstamo">Préstamo</option>
                                    <option value="Crédito">Crédito</option>
                                </select>
                            </td>
                            <td class="col-total"><input type="text" class="form-control" name="totalFila[]" readonly></td>
                            <td><button type="button" class="btn btn-danger" onclick="eliminarFila(this)">Eliminar</button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6" class="text-right"><strong>Total General:</strong></td>
                            <td><input type="text" class="form-control" id="total" name="total" readonly></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <button type="button" class="btn btn-success" onclick="agregarFila()">Agregar Producto</button>
        </div>

        <div class="form-group mt-4">
            <button type="submit" class="btn btn-primary">Registrar Gasto</button>
        </div>
    </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

1 respuesta 1

1

NaN = Not a Number. Es decir, no es un numero, por eso te da error.

Lo que puedes hacer es poner el input como numero.

function agregarFila() {
        var tabla = document.getElementById('tablaProductos').getElementsByTagName('tbody')[0];
        var nuevaFila = tabla.insertRow();
        
        var celdaDetalle = nuevaFila.insertCell(0);
        var celdaPrecio = nuevaFila.insertCell(1);
        var celdaCantidad = nuevaFila.insertCell(2);
        var celdaCliente = nuevaFila.insertCell(3);
        var celdaMetodoPago = nuevaFila.insertCell(4);
        var celdaFuenteDinero = nuevaFila.insertCell(5);
        var celdaTotalFila = nuevaFila.insertCell(6);
        var celdaAcciones = nuevaFila.insertCell(7);
        
        celdaDetalle.innerHTML = '<input type="text" class="form-control input-producto" name="detalleProducto[]" required>';
        celdaPrecio.innerHTML = '<input type="text" class="form-control input-precio" name="costo[]" oninput="formatoMoneda(this); calcularTotalFila(this);" required>';
        celdaCantidad.innerHTML = '<input type="number" class="form-control input-cantidad-pequeno" name="cantidad[]" oninput="calcularTotalFila(this)" required>';
        celdaCliente.innerHTML = '<input type="text" class="form-control" name="clienteProducto[]" required>';
        celdaMetodoPago.innerHTML = `
            <select class="form-control" name="metodoPago[]" required>
                <option value="Transferencia">Transferencia</option>
                <option value="Efectivo">Efectivo</option>
                <option value="QR">QR</option>
            </select>`;
        celdaFuenteDinero.innerHTML = `
            <select class="form-control" name="fuenteDinero[]" required>
                <option value="Dinero Personal">Dinero Personal</option>
                <option value="Adelanto del Cliente">Adelanto del Cliente</option>
                <option value="Préstamo">Préstamo</option>
                <option value="Crédito">Crédito</option>
            </select>`;
        celdaTotalFila.innerHTML = '<input type="text" class="form-control" name="totalFila[]" readonly>';
        celdaAcciones.innerHTML = '<button type="button" class="btn btn-danger" onclick="eliminarFila(this)">Eliminar</button>';
    }

    function eliminarFila(btn) {
        var fila = btn.parentNode.parentNode;
        fila.parentNode.removeChild(fila);
        calcularTotalGeneral();
    }

    function calcularTotalFila(element) {
        var fila = element.parentNode.parentNode;
        var cantidadInput = fila.querySelector('input[name="cantidad[]"]');
        var cantidad = cantidadInput.value.trim() === '' ? 0 : parseFloat(cantidadInput.value.trim());
        var costoInput = fila.querySelector('input[name="costo[]"]');
        var costo = costoInput.value.trim() === '' ? 0 : parseFloat(costoInput.value.trim().replace(/\./g, '').replace(',', '.'));
        var totalFila = fila.querySelector('input[name="totalFila[]"]');

        if (!isNaN(cantidad) && !isNaN(costo)) {
            var total = cantidad * costo;
            totalFila.value = total.toLocaleString('es-PY', { minimumFractionDigits: 0 });
        } else {
            totalFila.value = ''; // Setear el valor a vacío si no se puede calcular el total
        }
        calcularTotalGeneral();
    }

    function calcularTotalGeneral() {
        var totalGeneral = 0;
        var totalFilas = document.querySelectorAll('input[name="totalFila[]"]');
        totalFilas.forEach(function(totalFila) {
            if (totalFila.value) {
                var valorNumerico = parseFloat(totalFila.value.replace(/\./g, '').replace(',', '.'));
                totalGeneral += valorNumerico;
            }
        });
        document.getElementById('total').value = totalGeneral.toLocaleString('es-PY', { minimumFractionDigits: 0 });
    }

    function formatoMoneda(input) {
        var valor = input.value.replace(/\./g, '').replace(',', '.');
        input.value = parseFloat(valor).toLocaleString('es-PY', { minimumFractionDigits: 0 });
    }
body, html {
            height: 100%;
            margin: 10px; /* Añade un margen de 10px a todos los lados */
        }
        .container-fluid {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .input-producto {
            width: 200px; /* Ancho personalizado para el input de producto */
        }
        .input-precio {
            width: 100px; /* Ancho personalizado para el input de precio */
        }
        .input-cantidad-pequeno {
            width: 50px; /* Ancho personalizado para el input de cantidad */
        }
        .col-total {
            width: 120px; /* Ancho personalizado para la columna de Total */
        }
<div class="container-fluid mx-3">
    <h2 class="mb-4">Formulario de Registro de Gastos</h2>
    <form>
        <div class="form-group">
            <label for="fecha">Fecha de Registro</label>
            <input type="date" class="form-control" id="fecha" name="fecha" required>
        </div>
        <div class="form-group">
            <label for="origenCompra">Proveedor / Lugar de Compra</label>
            <input type="text" class="form-control" id="origenCompra" name="origenCompra" required>
        </div>

        <div class="form-group">
            <h4>Detalle de Productos</h4>
            <div class="table-responsive">
                <table class="table table-bordered" id="tablaProductos">
                    <thead class="thead-dark">
                        <tr>
                            <th>Producto</th>
                            <th>Precio Unitario</th>
                            <th class="col-1">Cantidad</th>
                            <th>Cliente</th>
                            <th>Método de Pago</th>
                            <th>Fuente del Dinero</th>
                            <th class="col-total">Total</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" class="form-control input-producto" name="detalleProducto[]" required></td>
                            <td><input type="number" class="form-control input-precio" name="costo[]" oninput="formatoMoneda(this); calcularTotalFila(this);" required></td>
                            <td class="col-1"><input type="number" class="form-control input-cantidad-pequeno" name="cantidad[]" oninput="calcularTotalFila(this)" required></td>
                            <td><input type="text" class="form-control" name="clienteProducto[]" required></td>
                            <td>
                                <select class="form-control" name="metodoPago[]" required>
                                    <option value="Transferencia">Transferencia</option>
                                    <option value="Efectivo">Efectivo</option>
                                    <option value="QR">QR</option>
                                </select>
                            </td>
                            <td>
                                <select class="form-control" name="fuenteDinero[]" required>
                                    <option value="Dinero Personal">Dinero Personal</option>
                                    <option value="Adelanto del Cliente">Adelanto del Cliente</option>
                                    <option value="Préstamo">Préstamo</option>
                                    <option value="Crédito">Crédito</option>
                                </select>
                            </td>
                            <td class="col-total"><input type="text" class="form-control" name="totalFila[]" readonly></td>
                            <td><button type="button" class="btn btn-danger" onclick="eliminarFila(this)">Eliminar</button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6" class="text-right"><strong>Total General:</strong></td>
                            <td><input type="text" class="form-control" id="total" name="total" readonly></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <button type="button" class="btn btn-success" onclick="agregarFila()">Agregar Producto</button>
        </div>
        
        <div class="form-group mt-4">
            <button type="submit" class="btn btn-primary">Registrar Gasto</button>
        </div>
    </form>
</div>

De este modo cuando borres el precio "no tendrás error". Ojo que en el HTML no aparece error pero cuando esto sea procesado tendrás error a no ser que especifiques en tu código que este valor no puede ser nulo. Pero en respuesta a tu pregunta puntual de este momento, con lo que ya te he dicho es suficiente.

1
  • fuenciona bien pero el problema ahora es que me permite solo 6 digitos no me permite mas Commented el 12 jul. a las 17:47

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.