Updating HTML element based on items in array-CodePudding

I am trying to make a shopping cart system for an assignment. As of now, when you click "add to cart" it will take the object from the products array and move it to the cart array, and also display the name of the most recently added item. It also will update the count but not the list when you click remove from cart. However, I am trying to make it so that it displays all names within the cart array, not the one most recently added to the cart. Also, when you click remove from cart, it removes the item based on the button you selected.

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);

    //?
  for (var i = 0; i < cart.length; i  ) {
      amountLabel.innerText = "("   cart.length   ") Cart: \n"   cart[i].Name;
    }
  });
}
for (const removeButton of removeButtons) {
  removeButton.addEventListener("click", () => {
    const index = cart.findIndex(p => p.Id === removeButton.dataset.product); 
    cart.splice(index, 1);
    amountLabel.innerText = "("   cart.length   ") Cart: \n" //Also remove item based on button selected;
  });
}

body {
    background-color: beige;
};

footer {
    text-align: center;
}

#main_title{
    font-size: 25;
    text-align: center;
    font-family: monospace;
};

.desc {
    font-family:'Courier New', Courier, monospace;
}

label {
    font-family:'Courier New', Courier, monospace
}

table, th, td {
    border:1px solid black;
}

table {
    display: none;
}

.main {
    margin-top: 20px;
}

.row {
    margin-top: 2%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 20%;
    text-align: center;
    background-color: rgb(235, 235, 207);
}

.column-checkout {
    float: left;
    width: 33.33%;
    text-align: center;
}

#img {
    height: 200px;
    width: 200px;
}

#cartamnt {
    float: right;
    font-size: 30px;
    text-decoration: none;
    color: black;
    background-color: grey;
    padding: 3px 10px;
    border-radius: 10px;
}

#cartitems {
    font-size: 35px;
}

#totalcost {
    font-size: 35px;
}

#purchase {
    font-size: 30px;
    text-decoration: none;
    color: black;
    background-color: grey;
    padding: 3px 10px;
    border-radius: 10px;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/styles.css">
      </head>
<body>
    <h1 id="main_title">Titan Sports and Apparel LLC</h1>
    <div class="main">
    <div class="row">
      <span href="checkout.html" id="cartamnt">(0) cart</span>
      <br />
    </div>
    <div class="row">
      <div class="column">
        <h1>Football helmet</h1>
        <img id="img" src="img/Helmet_A.jpg">
        <p>Price: $20</p>
        <p>Official Titan Sportswear Helmet</p>
        <button class="add" data-product="Titan_a">Add to cart</button>
        <button class="remove" data-product="Titan_a">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Light Blue Shirt</h1>
        <img id="img" src="img/Shirt_A.jpg">
        <p>Price: $15</p>
        <p>Light blue cotton material Titans shirt</p>
        <button class="add" data-product="Titan_b">Add to cart</button>
        <button class="remove" data-product="Titan_b">Remove from cart</button>
      </div>
      <div class="column">
        <h1>White Shirt</h1>
        <img id="img" src="img/Shirt_B.jpg">
        <p>Price: $15</p>
        <p>White cotton material Titans shirt</p>
        <button class="add" data-product="Titan_c">Add to cart</button>
        <button class="remove" data-product="Titan_c">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Blue Shirt</h1>
        <img id="img" src="img/Shirt_C.jpg">
        <p>Price: $15</p>
        <p>Blue cotton material Titans shirt</p>
        <button class="add" data-product="Titan_d">Add to cart</button>
        <button class="remove" data-product="Titan_d">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Hockey Stick</h1>
        <img id="img" src="img/Stick_A.png">
        <p>Price: $25</p>
        <p>Black Titans hockey stick</p>
        <button class="add" data-product="Titan_e">Add to cart</button>
        <button class="remove" data-product="Titan_e">Remove from cart</button>
      </div>
    </div>
  </div>
  <a href="index.html">Homepage</a>
  <footer>© Titan Sports and Apparel LLC | Email: [email protected]</footer>
  <script src="js/shoppingCart.js"></script>
</body>

</html>

CodePudding user response：

It helps if you delegate

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");

const container = document.querySelector(".main")
container.addEventListener("click", (e) => {
  const tgt = e.target.closest("button")
  if (tgt) {
    if (tgt.classList.contains("add")) {
      let product = products.find(p => p.Id == tgt.dataset.product);
      cart.push(product);
    } else if (tgt.classList.contains("remove")) {
      const index = cart.findIndex(p => p.Id === tgt.dataset.product);
      cart.splice(index, 1);
    }
    amountLabel.innerText = `(${cart.length}) Cart: ${cart.map(({Name}) => Name).join('\n')}`
  }
})

body {
  background-color: beige;
}

;
footer {
  text-align: center;
}

#main_title {
  font-size: 25;
  text-align: center;
  font-family: monospace;
}

;
.desc {
  font-family: 'Courier New', Courier, monospace;
}

label {
  font-family: 'Courier New', Courier, monospace
}

table,
th,
td {
  border: 1px solid black;
}

table {
  display: none;
}

.main {
  margin-top: 20px;
}

.row {
  margin-top: 2%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 20%;
  text-align: center;
  background-color: rgb(235, 235, 207);
}

.column-checkout {
  float: left;
  width: 33.33%;
  text-align: center;
}

#img {
  height: 200px;
  width: 200px;
}

#cartamnt {
  float: right;
  font-size: 30px;
  text-decoration: none;
  color: black;
  background-color: grey;
  padding: 3px 10px;
  border-radius: 10px;
}

#cartitems {
  font-size: 35px;
}

#totalcost {
  font-size: 35px;
}

#purchase {
  font-size: 30px;
  text-decoration: none;
  color: black;
  background-color: grey;
  padding: 3px 10px;
  border-radius: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h1 id="main_title">Titan Sports and Apparel LLC</h1>
  <div class="main">
    <div class="row">
      <span href="checkout.html" id="cartamnt">(0) cart</span>
      <br />
    </div>
    <div class="row">
      <div class="column">
        <h1>Football helmet</h1>
        <img id="img" src="img/Helmet_A.jpg">
        <p>Price: $20</p>
        <p>Official Titan Sportswear Helmet</p>
        <button class="add" data-product="Titan_a">Add to cart</button>
        <button class="remove" data-product="Titan_a">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Light Blue Shirt</h1>
        <img id="img" src="img/Shirt_A.jpg">
        <p>Price: $15</p>
        <p>Light blue cotton material Titans shirt</p>
        <button class="add" data-product="Titan_b">Add to cart</button>
        <button class="remove" data-product="Titan_b">Remove from cart</button>
      </div>
      <div class="column">
        <h1>White Shirt</h1>
        <img id="img" src="img/Shirt_B.jpg">
        <p>Price: $15</p>
        <p>White cotton material Titans shirt</p>
        <button class="add" data-product="Titan_c">Add to cart</button>
        <button class="remove" data-product="Titan_c">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Blue Shirt</h1>
        <img id="img" src="img/Shirt_C.jpg">
        <p>Price: $15</p>
        <p>Blue cotton material Titans shirt</p>
        <button class="add" data-product="Titan_d">Add to cart</button>
        <button class="remove" data-product="Titan_d">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Hockey Stick</h1>
        <img id="img" src="img/Stick_A.png">
        <p>Price: $25</p>
        <p>Black Titans hockey stick</p>
        <button class="add" data-product="Titan_e">Add to cart</button>
        <button class="remove" data-product="Titan_e">Remove from cart</button>
      </div>
    </div>
  </div>
  <a href="index.html">Homepage</a>
  <footer>© Titan Sports and Apparel LLC | Email: [email protected]</footer>
  <script src="js/shoppingCart.js"></script>
</body>

</html>