El código que voy a mostrar fue basado en el código del link que les dejo en la descripción ¿Cómo multiplicar y sumar inputs con miles y decimales, con JavaScript? para que sepan de donde saque la información. Estoy intentando que este código de formato de precio funcione como en el link anterior y me di cuenta que funciona solo con table
y sus raices tbody
tr
td
etc y además funciona solo en un mismo tr
y con las etiquetas td
o th
, o sea, no se puede plasmar verticalmente si no horizontal siempre y cuando se vea respaldado por una tabulación completa como les comento, de otra manera no responde.
Si quisiera que me dieran una opinión así la verdad del porque ocurre esto, se los agradecería mucho, muchas gracias, que pasen buenas noches
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Requisición de personal – RH.con</title>
</head>
<body>
<form action="" method="POST" >
<div style="float: left; width: 25%">
<div><label>Precio: </label><input type="text" style="float: right" class="input" ></div>
<br>
<div><label>Cantidad: </label><input type="text" style="float: right" class="input" ></div>
<br>
<div><label>Total: </label><input type="text" style="float: right" class="total" readonly></div>
</div>
</form>
</body>
</html>
<script>
let input = document.querySelectorAll(".input");
input.forEach(function(e) {
// Solo es necesario un evento, no necesitas otros
e.addEventListener("input", multiplica);
});
function multiplica() {
let tr = this.closest("tr");
// inputs[0] es precio, primera posición
// inputs[1] es cantidad
let inputs = tr.querySelectorAll(".input");
// Eliminar puntos, remplazar coma por punto y asegurar que es un número
// Si algo falla, el valor será cero
let precio = parseFloat(inputs[0].value.replaceAll(',', '').replace(',', '.')) || 0;
// El input de cantidad es numérico, no es necesario hacer remplazos
let cantidad = parseFloat(inputs[1].value) || 0;
// Calcuar total de esta fila
tr.querySelector('.total').value = (precio * cantidad).toFixed(2);
}
</script>