Estoy tratando de calcular automáticamente el monto del descuento completando dos campos de entrada, pero no sé qué estoy haciendo mal. Lo que quiero es que a medida que llene ambas entradas aparezca el resultado en una tercera entrada.
<div class="form-group col-md-2"> <label for="sale_price">Precio de Venta</label> <input type="number" pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" onkeyup="discount();"> </div> <div class="form-group col-md-3"> <label for="discount_percentage">Porcentaje de descuento (%)</label> <input type="number" name="discount_percentage" class="form-control" id="discountP" onkeyup="discount();"> </div> <div class="form-group col-md-3"> <label for="discount">Descuento</label> <input type="number" name="discount" placeholder="discount" class="form-control"> </div> <script type="text/javascript"> function discount() { var x; (document.getElementById('saleP').document.getElementById('discountP')) / 100 = x } </script>¿Alguien sabe lo que estoy haciendo mal?
Bueno, no estás ingresando el valor variable x en nada. Si agrega el evento onchange también, funcionará si el usuario usa para aumentar el valor decreciente usando los botones.
En lugar de agregar dos eventos, puede agregar oninput para cambios dinámicos, ya sea que el usuario ingrese valores usando el teclado o los botones
function discount() { var buyActualPrice = document.getElementById('saleP').value var cardDisc = document.getElementById('discountP').value var buyAtDiscAmount = (buyActualPrice * cardDisc) / 100 document.getElementById('DiscountAmount').value = buyAtDiscAmount var priceAfterDisc = buyActualPrice - buyAtDiscAmount document.getElementById('PriceAfterDisc').innerHTML = priceAfterDisc } document.querySelectorAll("#DiscountAmount").forEach(discount) <div class="form-group col-md-2"> <label for="sale_price">Price</label> <input type="number" pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" oninput="discount();"> </div> <div class="form-group col-md-3"> <label for="discount_percentage">Percentage disc. (%)</label> <input type="number" name="discount_percentage" class="form-control" id="discountP" oninput="discount();"> </div> <div class="form-group col-md-3"> <label for="discount">Discount Amount</label> <input type="number" name="discount" placeholder="discount" class="form-control" id="DiscountAmount"> </div> <div>Price after discount applied : <span id="PriceAfterDisc"></span></div>La última línea en JavaScript se agrega para que, si hay valores iniciales, los resultados se muestren al principio antes de cualquier evento.
No estoy seguro de cuál fue su pensamiento detrás de la línea de ejemplo.
He hecho los siguientes cambios:
id a la última input para orientarla<input id="discount">const price = document.getElementById('saleP').value;const percentage = document.getElementById('discountP').value;const discount = price / 100 * percentage;inputdocument.getElementById('discount').value = discount; function discount(){ const price = document.getElementById('saleP').value; const percentage = document.getElementById('discountP').value; const discount = price / 100 * percentage; document.getElementById('discount').value = discount; } <div class="form-group col-md-2"> <label for="sale_price">Precio de Venta</label> <input type="number" pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" onkeyup="discount();"> </div> <div class="form-group col-md-3"> <label for="discount_percentage">Porcentaje de descuento (%)</label> <input type="number" name="discount_percentage" class="form-control" id="discountP" onkeyup="discount();"> </div> <div class="form-group col-md-3"> <label for="discount">Descuento</label> <input type="number" name="discount" placeholder="discount" id="discount" class="form-control" > </div>