On click, push one item from an an array to another, and change text dependent on items in array

Question

I am trying to set it so that if I click on a button with the class of "addtocart" it will check the id of the button in the HTML document and iterate through the products array objects until it finds the object with the same Id as the button on the element, and then push it to the cart array. I then need to change the innertext of the "cartamnt" span so that based on how many items are added to the cart, text "0 cart" becomes "1 cart", etc..

//Arrays
var products = [{
    Price: 20,
    Name: "Football Helmet",
    Description: "Titans football helmet",
    Id: "Titan_a"
  },
  {
    Price: 15,
    Name: "Light Blue Shirt",
    Description: "Titans light blue shirt",
    Id: "Titan_b"
  },
  {
    Price: 15,
    Name: "White Shirt",
    Description: "Titans white shirt",
    Id: "Titan_c"
  },
  {
    Price: 15,
    Name: "Blue Shirt",
    Description: "Titans blue shirt",
    Id: "Titan_d"
  },
  {
    Price: 25,
    Name: "Hockey Stick",
    Description: "Titans hockey stick",
    Id: "Titan_d"
  }
];

var cart = [];

//All the button variables
var addtocart = document.getElementsByClassName("add");
var camount = document.getElementById("cartamnt");
cartamnt.innerText = "0 cart"

addtocart.onclick = function(products, cart) {
  for (var i = 0; i < products.length; i++) {
    if (addtocart.Id == products.Id) {
      cart.push(products.Id[i])
      cartamnt.innerText = i++ + "cart"
    }
  }
}





  



  Titan Sports and Apparel LLC
  
    
      0 cart
      

    
    
      
        Football helmet
        
        Price: $20
        Official Titan Sportswear Helmet
        
        
      
      
        Light Blue Shirt
        
        Price: $15
        Light blue cotton material Titans shirt
        
        
      
      
        White Shirt
        
        Price: $15
        White cotton material Titans shirt
        
        
      
      
        Blue Shirt
        
        Price: $15
        Blue cotton material Titans shirt
        
        
      
      
        Hockey Stick
        
        Price: $25
        Black Titans hockey stick
        
        
      
    
  
  Homepage
  © Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com

user_1925272 · Answer

Your code is a bit messy. I cleaned it a bit to get you started, but I would really suggest you post it at Code Review to learn how you can improve it.

The first thing to notice is that you are using the id of the "add" button to store the id of the product. This is a problem for two reasons:

The purpose of the id attribute is to give the element a unique identifier, not to store data.
You also have a "remove" button, which should remove the product from the cart. With your approach, it will have the same id as the "add" button, which is incorrect since id should be unique. The other way would be to give it a different id, and somehow extract the product id from it in JS, which is really convoluted.

This is why we will use data attributes instead of id to store the product id. For example:

Now, the problem with your JS is that your addtocart variable is actually an array of all buttons, and not a single button, so you cannot just attach an onclick event to it. You need to iterate over all the buttons and individually attach the onclick event to them.

So we will get something like this:

const addButtons = document.getElementsByClassName("add");
const removeButtons = document.getElementsByClassName("remove");

for (const addButton of addButtons) {
    addButton.addEventListener("click", () => {
         ...
    });
}
for (const removeButton of removeButtons) {
    removeButton.addEventListener("click", () => {
         ...
    });
}

Now it's easy to implement the adding and removing. You don't need to manually loop throw your array, you could simply use the find function and some other useful "built-in" array functions.

Here is a complete working example:

let products = [{
    Price: 20,
    Name: "Football Helmet",
    Description: "Titans football helmet",
    Id: "Titan_a"
  },
  {
    Price: 15,
    Name: "Light Blue Shirt",
    Description: "Titans light blue shirt",
    Id: "Titan_b"
  },
  {
    Price: 15,
    Name: "White Shirt",
    Description: "Titans white shirt",
    Id: "Titan_c"
  },
  {
    Price: 15,
    Name: "Blue Shirt",
    Description: "Titans blue shirt",
    Id: "Titan_d"
  },
  {
    Price: 25,
    Name: "Hockey Stick",
    Description: "Titans hockey stick",
    Id: "Titan_e"
  }
];

let cart = [];

const addButtons = document.getElementsByClassName("add");
const removeButtons = document.getElementsByClassName("remove");
const amountLabel = document.getElementById("cartamnt");

for (const addButton of addButtons) {
  addButton.addEventListener("click", () => {
    let product = products.find(p => p.Id == addButton.dataset.product);
    cart.push(product);
    amountLabel.innerText = cart.length + "items";
  });
}
for (const removeButton of removeButtons) {
  removeButton.addEventListener("click", () => {
    const index = cart.findIndex(p => p.Id === removeButton.dataset.product); // index of product to remove
    cart.splice(index, 1); // removing it
    amountLabel.innerText = cart.length + "items";
  });
}





  Titan Sports and Apparel LLC
  
    
      0 cart
      

    
    
      
        Football helmet
        
        Price: $20
        Official Titan Sportswear Helmet
        
        
      
      
        Light Blue Shirt
        
        Price: $15
        Light blue cotton material Titans shirt
        
        
      
      
        White Shirt
        
        Price: $15
        White cotton material Titans shirt
        
        
      
      
        Blue Shirt
        
        Price: $15
        Blue cotton material Titans shirt
        
        
      
      
        Hockey Stick
        
        Price: $25
        Black Titans hockey stick
        
        
      
    
  
  Homepage
  © Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com

user_10574423 · Answer

This is quick and dirty, but it should do your job:

Note that I added a 'remove' class onto the 'remove from cart' buttons and I put as id attribute the same id (as we need to search by them in the products array). This should work and as a bonus I added an if case for when you have multiple identhical products in the cart but want to remove just one.

I also attached event listeners differently.

const addProductToCard = (e) => {
    const productToAdd = products.find(i => i.Id === e.target.id);
    cart.push(productToAdd);
}

const removeFromCard = (e) => {
    const identical = cart.filter(i => i.Id === e.target.id);

    if (identical.length === 1) {
        cart = cart.filter(i => i.Id !== e.target.id);
    } else {
        cart = [...identical.splice(1), ...cart.filter(i => i.Id !== e.target.id)];
    }
}

document.querySelectorAll('.add').forEach(i => i.addEventListener("click", addProductToCard));
document.querySelectorAll('.remove').forEach(i => i.addEventListener("click", removeFromCard));

user_9153448 · Answer

You just have to loop over the array and then add event listener as:

addtocart.forEach(btn => {
  btn.addEventListener("click", (e) => {
    const Id = e.target.id;
    const product = products.find(o => o.Id === Id);
    product &&  cart.push({ ...product });
    cartamnt.innerText = cart.length + " cart";
  })
})

var products = [{
    Price: 20,
    Name: "Football Helmet",
    Description: "Titans football helmet",
    Id: "Titan_a"
  },
  {
    Price: 15,
    Name: "Light Blue Shirt",
    Description: "Titans light blue shirt",
    Id: "Titan_b"
  },
  {
    Price: 15,
    Name: "White Shirt",
    Description: "Titans white shirt",
    Id: "Titan_c"
  },
  {
    Price: 15,
    Name: "Blue Shirt",
    Description: "Titans blue shirt",
    Id: "Titan_d"
  },
  {
    Price: 25,
    Name: "Hockey Stick",
    Description: "Titans hockey stick",
    Id: "Titan_d"
  }
];

var cart = [];

//All the button variables
var addtocart = [...document.getElementsByClassName("add")];
var camount = document.getElementById("cartamnt");
cartamnt.innerText = "0 cart"

addtocart.forEach(btn => {
  btn.addEventListener("click", (e) => {
    const Id = e.target.id;
    const product = products.find(o => o.Id === Id);
    product &&  cart.push({ ...product });
    cartamnt.innerText = cart.length + " cart";
  })
})

Titan Sports and Apparel LLC

  
    0 cart
    

  
  
    
      Football helmet
      
      Price: $20
      Official Titan Sportswear Helmet
      
      
    
    
      Light Blue Shirt
      
      Price: $15
      Light blue cotton material Titans shirt
      
      
    
    
      White Shirt
      
      Price: $15
      White cotton material Titans shirt
      
      
    
    
      Blue Shirt
      
      Price: $15
      Blue cotton material Titans shirt
      
      
    
    
      Hockey Stick
      
      Price: $25
      Black Titans hockey stick
      
      
    
  

Homepage
© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com

On click, push one item from an an array to another, and change text dependent on items in array

3 Answers