I'm currently coding a javascript calculation for shopping cart webpage. But I have a problem with my subtotal, everything works well only the sub Total of everything for payment is the wrong one.
Here's my table code where I put all the classes for the subtotal function:
<tr>
<td>$no</td>
<td>$item[item_name]</td>
<td>
$item[item_price]<input
type="hidden"
id="only-number-input"
class="cart_price"
value="$item[item_price]"
/>
</td>
<td>
<input
type="number"
class="text-center cart_qty"
onchange="subTotal()"
value="$item[qty]"
min="1"
max="10"
/>
</td>
<td class="cart_total"></td>
<td>
<form action="manage-cart.php" method="post">
<button class="btn btn-sm btn-outline-danger" name="remove">
REMOVE
</button>
<input type="hidden" name="item_name" value="$item[item_name]" />
</form>
</td>
</tr>
And here is where I put the subtotal ID:
<div class="border-top py-4">
<h4 class="font-baloo font-size-20">Subtotal</h4>
<h5 class="text-danger" id="sub_total"></h5>
<button type="submit" class="btn btn-warning mt-3">Proceed to Buy</button>
</div>
And here is my JavaScript code:
var cart_price = document.getElementsByClassName('cart_price');
var cart_qty = document.getElementsByClassName('cart_qty');
var cart_total = document.getElementsByClassName('cart_total');
var sub_total = document.getElementById('sub_total');
function subTotal() {
sub_total = 0;
for (i = 0; i < cart_price.length; i++) {
var calculation = (cart_price[i].value) * (cart_qty[i].value);
cart_total[i].innerText = calculation;
sub_total = sub_total + calculation;
}
sub_total.innerText = sub_total;
}
subTotal();
You are resetting sub_total to 0 inside your function so it is no longer a DOM element reference.
You can use a different name for the value inside the function. In this example I have used sub_total_value:
var cart_price = document.getElementsByClassName('cart_price');
var cart_qty = document.getElementsByClassName('cart_qty');
var cart_total = document.getElementsByClassName('cart_total');
var sub_total = document.getElementById('sub_total');
function subTotal() {
var sub_total_value = 0;
for (i = 0; i < cart_price.length; i++)
{
var calculation = (cart_price[i].value) * (cart_qty[i].value);
cart_total[i].innerText = calculation;
sub_total_value = sub_total_value + calculation;
}
sub_total.innerText = sub_total_value;
}
subTotal();
Your javascript code has two variables named sub_total. Try renaming one.