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>