Question 184485 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript to calculate total Price and Cost?

How to rewrite the below script to auto calculate the total price and total cost at the same time ??
Thank you very much for your help & support !

var x = 0;
var y = 0;
var z = 0;
function calc(obj) {
    var e = obj.id.toString();
    if (e == 'quantity') {
        x = Number(obj.value);
        y = Number(document.getElementById('unit_price').value);
    } else {
        x = Number(document.getElementById('quantity').value);
        y = Number(obj.value);
    }
    z = x * y ;
    document.getElementById('sub_price').value = z;
    document.getElementById('update').innerHTML = z;
}
<form>
Quantity: <input type="number" id="quantity" name="quantity" value="1" onkeyup="calc(this)" required="required"/>

<br>
Unit Price:<input type="number" id="unit_price" onkeyup="calc(this)" name="unit_price" step="any" value="3"  required="required" />
<br>
    
Total Price:<input  type="number" id="sub_price"  name="sub_price" step="any"  value="" readonly required="required" />

<br><br>
Unit Cost:<input type="number" id="unit_cost" onkeyup="calc(this)" name="unit_cost" step="any" value="2"  required="required" />

<br>
Total Cost:<input  type="number" id="sub_cost"  name="sub_cost" step="any"  value="" readonly required="required" />
    
    

</form>
Tags:

2

Answers


  1. 0

    You can update your calc function as follows. Hopefully this will work:

    function calc() {
var quantity = Number(document.getElementById('quantity').value);
var unitPrice = Number(document.getElementById('unit_price').value);
var unitCost = Number(document.getElementById('unit_cost').value);
var totalPrice = quantity * unitPrice;
 var totalCost = quantity * unitCost;
document.getElementById('sub_price').value = totalPrice;
document.getElementById('sub_cost').value = totalCost;
document.getElementById('update').innerHTML = totalPrice;

}


<form>
  Quantity: <input type="number" id="quantity" name="quantity" value="1" required="required" />
  <br>
  Unit Price: <input type="number" id="unit_price" name="unit_price" step="any" value="3" required="required" />
  <br>
  Total Price: <input type="number" id="sub_price" name="sub_price" step="any" value="" readonly required="required" />
  <br><br>
  Unit Cost: <input type="number" id="unit_cost" name="unit_cost" step="any" value="2" required="required" />
  <br>
  Total Cost: <input type="number" id="sub_cost" name="sub_cost" step="any" value="" readonly required="required" />
</form>

<script>
  
  document.getElementById('quantity').addEventListener('input', calc);
  document.getElementById('unit_price').addEventListener('input', calc);
  document.getElementById('unit_cost').addEventListener('input', calc);
  
  
  calc();
</script>
    Login or Signup to reply.
  2. 0

    You can delegate. I assume you will have more than one item

    const form = document.querySelector("form");
const totalField = document.getElementById("total")
const itemContainers = [...form.querySelectorAll(".item")];
const calc = (e) => {
  const total = itemContainers.map(item => {
      const qty = +item.querySelector(".quantity").value,
        price = +item.querySelector(".unit_price").value,
        subTotal = qty * price;
      item.querySelector(".sub_price").value = !price || isNaN(price) ? 0 : price.toFixed(2);
      item.querySelector(".sub_cost").value = !subTotal || isNaN(subTotal) ? 0 : subTotal.toFixed(2);
      return subTotal;
    })
    .reduce((a, b) => a + b);
  totalField.value = total.toFixed(2);
};


form.addEventListener("input", calc)
    <form>
  <div class="item">
    Quantity: <input type="number" class="quantity" name="quantity" value="1" required="required" />

    <br> Unit Price:<input type="number" class="unit_price" name="unit_price" step="any" value="3" required="required" />
    <br> Sub Price:<input type="number" class="sub_price" name="sub_price" step="any" value="" readonly required="required" />

    <br><br> Unit Cost:<input type="number" class="unit_cost" name="unit_cost" step="any" value="2" required="required" />
    <br> Sub Cost:<input type="number" class="sub_cost" name="sub_cost" step="any" value="" readonly required="required" />
  </div>

  <div class="item">
    Quantity: <input type="number" class="quantity" name="quantity" value="1" required="required" />

    <br> Unit Price:<input type="number" class="unit_price" name="unit_price" step="any" value="3" required="required" />
    <br> Sub Price:<input type="number" class="sub_price" name="sub_price" step="any" value="" readonly required="required" />

    <br><br> Unit Cost:<input type="number" class="unit_cost" name="unit_cost" step="any" value="2" required="required" />
    <br> Sub Cost:<input type="number" class="sub_cost" name="sub_cost" step="any" value="" readonly required="required" />
  </div>
  <hr/>
  Total cost: <input id="total" />
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search