JavaScript - How to Obtain Value from HTML with Event Listener

Question

ive been working on a coding project for my store an have hit a wall with a feature - "remove item from cart"

My code posted does the following: takes data from "cart" array and pushes each product item to DOM with a for-loop. For example if there are three items in cart, there will be 3 lines displayed.

My issue is trying to delete an individual line item. My "remove" button only works for the last product added (in the case of 3 line items - "index #2). It will not recognize the value of j at index 0 and index 1.

Im trying to obtain the value for each button clicked. Review the function removeItem

function displayCart() {
 var cartItem = JSON.parse(sessionStorage.getItem("cartSS"));
 if (cartItem != null) {
  var cart = cartItem;
 }else {
  var cart = [];
 }
 if (cart.length == 0) {
  var emptyCartMessage = document.getElementById('product-container');
  emptyCartMessage.insertAdjacentHTML('afterend', '<div id ="emptyCart">Your Cart is Empty</div>');
  document.getElementById('subtotal').style.display = "none";
 } else {
  var productLine = document.getElementById('product-container');
  var subTotal = 0;
  for (var j in cart) {
   var productName = productNameObj[cart[j].productID];
   var lineTotal = parseInt(cart[j].quantity) * (cart[j].price);
   
   subTotal+= lineTotal;
   
   productLine.insertAdjacentHTML('afterend', `<div class="product-line"><img id = "cart-img" src="img/${cart[j].productID}.jpg" alt="cart"><div id = "cart-product"><h3 id = "product-name">${productName}</h3><p id = "product-size">Size: ${cart[j].size}</p></div><div id = "cart-price"><h3 id = "heading-price">Item Price</h3><p id = "product-price">(${cart[j].quantity}) x $${cart[j].price} = $${lineTotal.toFixed(2)}</p></div><div class = "remove-btn" value = "${j}"><button onclick="removeItem()">Remove Item</button></div></div>`);
  }
  document.getElementById('subtotal').textContent = "Subtotal: $" + subTotal;
 }
}

function removeItem (){
 var cart = JSON.parse(sessionStorage.getItem("cartSS"));
 
 var btnIndex = document.querySelector('.remove-btn').getAttribute("value");
 console.log(cart[btnIndex]);
 console.log(btnIndex);
}

Don't use `for .. in` for arrays as you could accidentally iterate over other properties of the array (like methods) instead of only the index properties (ie 1,2,3, etc). Use `for ... of` instead. — Patrick Evans, Jun 25 '18 at 20:10

score 0 · Answer 1 · answered Jun 25 '18 at 20:16

Your problem is you are using

document.querySelector('.remove-btn')

to get a reference to the element. This will only ever get the first .remove-btn it sees not the next one in line after each call.

Pass your element to your function so you can get a proper reference to it.

<div class = "remove-btn" value = "${j}"><button onclick="removeItem(this.parentElement)">Remove Item</button></div>

this will reference the <button>. And parentElement, as the name implies, will be the parent element in this case your .remove-btn element.

And change removeItem function to

function removeItem (removeBtn){
    var cart = JSON.parse(sessionStorage.getItem("cartSS"));

    //var btnIndex = document.querySelector('.remove-btn').getAttribute("value");
    var btnIndex = removeBtn.getAttribute('value');
    console.log(cart[btnIndex]);
    console.log(btnIndex);
}

Thank-you Patrick, I've been trying to figure this out for hours. I really appreciate it. I'm self-teaching entry web development to hopefully switch careers. This means alot. Thank-you again. — Rasheed M, Jun 25 '18 at 20:39

JavaScript - How to Obtain Value from HTML with Event Listener

1 Answers1