Tengo este script
, que me permite sumar números en tiempo real:
function operacion() {
caja = document.forms["sumar"].elements;
var numero1 = Number(caja["cantidad"].value);
var numero2 = Number(caja["costo"].value);
var numero3 = Number(caja["monto_pagar"].value);
var numero4 = Number(caja["descuento"].value);
resultado = (numero1 * numero2);
var desc = (numero1 * numero2) * numero4 / 100;
caja["saldo_pagar"].value = (resultado - numero3) - desc;
if (!isNaN(resultado)) {
var descuento = (numero1 * numero2) * numero4 / 100;
caja["total"].value = (numero1 * numero2) - descuento;
}
}
<form name="sumar">
<label>Cantidad</label>
<input type="text" name="cantidad" placeholder="Cantidad" onKeyUp="operacion()">
<br>
<label>Costo</label>
<input type="text" name="costo" placeholder="Costo" onKeyUp="operacion()">
<br>
<label>Monto a pagar</label>
<input type="text" class="form-control" name="monto_pagar" placeholder="Monto a pagar" onKeyUp="operacion()">
<br>
<label>Descuento</label>
<input type="text" name="descuento" placeholder="Monto a pagar" onKeyUp="operacion()">
<br>
<label>SALDO</label>
<input type="text" name="saldo_pagar">
<br>
<label>TOTAL</label>
<input type="text" name="total">
</form>
Y funciona perfectamente. Pero tengo ahora tengo el monto a pagar en un select, y tengo problemas al realizar esta operación.
function operacion() {
caja = document.forms["sumar"].elements;
var numero1 = Number(caja["cantidad"].value);
var numero2 = Number(caja["costo"].value);
var numero3 = Number(caja["monto_pagar"].value);
var numero4 = Number(caja["descuento"].value);
resultado = (numero1 * numero2);
var desc = (numero1 * numero2) * numero4 / 100;
caja["saldo_pagar"].value = (resultado - numero3) - desc;
if (!isNaN(resultado)) {
var descuento = (numero1 * numero2) * numero4 / 100;
caja["total"].value = (numero1 * numero2) - descuento;
}
}
<form name="sumar">
<label>Cantidad</label>
<input type="text" name="cantidad" placeholder="Cantidad" onKeyUp="operacion()">
<br>
<label>Monto a pagar</label>
<input type="text" name="monto_pagar" placeholder="Monto a pagar" onKeyUp="operacion()"> <br>
<label>Costo</label>
<select name="costo" onchange="operacion()">
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
<br> <label>Descuento</label>
<input type="text" name="descuento" placeholder="Monto a pagar" onKeyUp="operacion()">
<br>
<label>SALDO</label>
<input type="text" name="saldo_pagar">
<br>
<label>TOTAL</label>
<input type="text" name="total">
</form>