CODEWITHSUNDEEP
javascriptnode.jshandlebars.js
Sivaprasad
Sivaprasad

Reputation: 119

how to give seperate id to a list of buttons in javascript?

I have been posting this same issue for last 2-3 days , nobody gave a proper solution.

Problem:

I have set of increment and decrement button in my shopping cart page to manage products quantity before checkout. I want all my decrease button to be disabled if the quantity is equals to 1. I have used set of IF statements to do that. But, those IF conditions are only working when my cart page contains one item at a time. I have founded the issue but getting no solution for that. The problem is that, the button id is same on each cases so it override one another. So, I want to give different different id's when each cart item is displayed on the page with - and + buttons. How to make my code like that ?

Here's my code for both buttons and IF statements.

 {{#each products}}
            <tr>

                <td><img src="/product-images/{{this.product._id}}.jpg" 
style="width:70px;height:70px" alt=""></td>
                <td>{{this.product.Name}}</td>
                <td>Rs.{{this.product.Price}}</td>


                <td>
                    <button class="btn btn-info mr-3 cart-item-count " id="button(-)"
                        
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',-1)">-</button>
                    <span id="{{this.product._id}}">{{this.quantity}}</span>
                    <button class="btn btn-info ml-3 cart-item-count" id="button(+)"
                        
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',1)">+</button>
                </td>
                <td>
                    <button type="button" class="btn btn-danger">Remove</button>
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <hr>
    <div class="float-right pr-5 pt-5">
        <h3 style="text-align:center">Total Rs. <span id="total">{{total}}</span></h3>
        <a href="/place-order" class="btn btn-primary mt-3" style="width:100%">Place Order</a>
    </div>
</div>
</section>
{{#each products}}
<h1 id="Quantity">{{this.quantity}}</h1>
{{/each}}
<script>
let Quantity = parseInt(document.getElementById('Quantity').innerHTML);

//console.log(Quantity)

if (Quantity == 1) {
    document.getElementById("button(-)").disabled = true
} else {
    document.getElementById("button(-)").disabled = false
}

if (Quantity == 10) {
    document.getElementById("button(+)").disabled = true
} else {
    document.getElementById("button(+)").disabled = false
}

function changeQuantity(cartId, proId, userId, count) {
    count = parseInt(count)
    let quantity = parseInt(document.getElementById(proId).innerHTML)
    let qty = quantity + count
    //console.log(qty)
    if (qty > 1) {
        document.getElementById('button(-)').disabled = false
    } else if (qty == 1 || qty == 10) {
        document.getElementById('button(-)').disabled = true
    }

    if (qty == 10) {
        document.getElementById('button(+)').disabled = true
    } else {
        document.getElementById('button(+)').disabled = false
    }

    $.ajax({
        url: '/change-product-quantity',
        data: {
            cart: cartId,
            product: proId,
            user: userId,
            count: count,
            quantity: qty
        },
        method: 'post',
        success: (response) => {

            document.getElementById(proId).innerHTML = quantity + count
            document.getElementById('total').innerHTML = response.total

            location.reload()

        }
})
}

Note: value of quantity in the above code is taken from Mongodb using Handlebars.

Current Output

As you can see this image that, the disabling effect only applied to first row of button not the rest. This has to be solved .

Expected output:

All the - button must be disabled while page loads.

Thank You:

Upvotes: 0

Views: 120

Answers (1)

holtc
holtc

Reputation: 1820

Add {{@index}} inside your id attributes

h/t How to get index in Handlebars each helper?

Upvotes: 1

Related Questions