Actualmente estoy codificando un cálculo de javascript para la página web del carrito de compras. Pero tengo un problema con mi subtotal, todo funciona bien solo que el subtotal de todo para pago es el incorrecto.

Aquí está el código de mi tabla donde puse todas las clases para la función de subtotal:

 <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>

Y aquí es donde pongo el ID del subtotal:

 <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>

Y aquí está mi código JavaScript:

 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();