document.getElementById to inner.Text doesn't work-CodePudding

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

Thank you very much in Advanced.

CodePudding user response：

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

CodePudding user response：

Your javascript code has two variables named sub_total. Try renaming one.