文章/答案/技术大牛

发布

社区首页 >问答首页 >基于数组中的项更新HTML元素

问基于数组中的项更新HTML元素
EN

Stack Overflow用户

提问于 2021-11-15 18:45:12

回答 1查看 27关注 0票数 2

我正在尝试为一项任务创建一个购物车系统。现在，当您单击"add to cart“时，它将从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>

html

arrays

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-15 18:56:56

如果你委托的话会有所帮助

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69979370

复制

相似问题

问基于数组中的项更新HTML元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于数组中的项更新HTML元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于数组中的项更新HTML元素
EN