I am trying to auto calculate the discount amount by filling in two input fields but I don't know what am I doing wrong. What I want is that as I fill both inputs it appears the result in a third input.
<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>Does anyone knows what I am doing wrong?
Well you are not inputting variable x value into anything . If you add onchange event also, than it will work if user uses to increase decrease value using buttons.
Instead of adding two events you can add oninput for dynamic changes whether user input values using keyboard or buttons
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>The last line in JavaScript is added so that if there are initial values than the results are shown at the start before any event
Not sure what your thought was behind the example line.
I've made the following changes:
id to the last input to target it<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>