Question 227194 in Html Question posted in
Some basic documentation can be found here.

Html – Remove Item from shopping cart does not work

REMOVE button does not work. Even in console when i click the button nothing appears in the console. Can anyone spot the problem?

I feel like something is wrong with the classes, not sure though.

This JS for shopping cart. Is the whole js code its just the function that included the remove button functionality.

if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready)
} else {
  ready()
}

function ready() {
  var removeCartItemButtons = document.getElementsByClassName("btn-danger")
  console.log(removeCartItemButtons)
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener("click", removeCartItem)
    console.log("click")
  }

  var quantityInputs = document.getElementsByClassName("quantity__item")
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener("change", quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName("shop-item-button")
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener("click", addToCartClicked)
  }

  document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
<table>
  <thead>
    <div class="cart-row">
      <th><span class="cart-item cart-header cart-column">ITEM</span></th>
      <th><span class="cart-price cart-header cart-column">QUANTITY</span></th>
      <th><span class="cart-quantity cart-header cart-column">PRICE</span></th>
      <th></th>
    </div>
  </thead>
  <tbody class="cart-items">
    <tr>
      <div class="cart-row">
        <td class="product__cart__item">
          <div class="product__cart__item__pic">
            <img src="img/shop/cart/cart-1.jpg" width="100" height="100">
          </div>
          <div class="product__cart__item__text">
            <h6>T-shirt Contrast Pocket</h6>
          </div>
        </td>
        <td class="quantity__item">
          <div class="quantity">
            <div class="pro-qty">
              <input type="text" value="1">
            </div>
          </div>
        </td>
        <td class="cart__price">$ 30.00</td>
        <td>
          <button type="button" class="btn btn-danger">REMOVE</button>
        </td>
      </div>
    </tr>
  </tbody>

</table>
Tags:

2

Answers


  1. 0

    The issue here is that console.log is present inside for loop.You should put console.log in your function which is removeCartItem

    Try this:

    function removeCartItem() {
    console.log("click");
}

var removeCartItemButtons = 
document.getElementsByClassName("btn-danger");
for (let i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i];
    button.addEventListener("click", removeCartItem);
}
    Login or Signup to reply.
  2. 0

    this might do the work

    document.querySelectorAll(".btn-danger").forEach(el => {
    el.addEventListener('click', removeCartItem)
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search