根据数组中的项目更新 HTML 元素答案

【问题标题】：Updating HTML element based on items in array根据数组中的项目更新 HTML 元素
【发布时间】：2021-12-26 22:53:15
【问题描述】：

我正在尝试为一项任务制作一个购物车系统。到目前为止，当您单击“添加到购物车”时，它将从 products 数组中获取对象并将其移动到购物车数组中，并且还会显示最近添加的商品的名称。当您单击从购物车中删除时，它还会更新计数，但不会更新列表。但是，我正在尝试使它显示购物车数组中的所有名称，而不是最近添加到购物车中的名称。此外，当您点击从购物车中移除时，它会根据您选择的按钮移除商品。

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: TitanSportsApparel@gmail.com</footer>
  <script src="js/shoppingCart.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

如果你委托它会有所帮助

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: TitanSportsApparel@gmail.com</footer>
  <script src="js/shoppingCart.js"></script>
</body>

</html>

【讨论】：

非常感谢您的帮助，您能否向我解释一下这一行：amountLabel.innerText = (${cart.length}) Cart: ${cart.map(({Name}) => Name).join('\n')} @mplungjan
查找模板文字 - 我使用地图创建了一个名称数组