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)
}
Index of shopping cart
<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>