无法从购物车中删除商品（在前端），但在后端可用

Question

我一直在Vanilla JS中建立购物车。 我有一个处理DOM中所有逻辑的接口，以及一个处理数组操作的后端。

我的问题是我在尝试从购物车中删除商品的按钮遇到麻烦。 不知道为什么我的代码不会从购物车中删除物品，但是绝对可以在我的测试中使用！

我试图将购物车中的商品链接到一个ID，该ID会随着您对购物车的增加而增加（因此购物车中的每个商品都有其自己的唯一ID），并且我一直尝试通过addEventLister（'单击”），然后调用我的removeItem（）方法，然后在循环外部渲染购物车。 不幸的是，它无法正常工作，我感到非常困惑。 数据流cart.js>接口> index.html

cart.js

class Cart {
  constructor() {
    this.cartArray = []
    this.total = 0
  }
  add(item) {
    this.cartArray.push(item)
  }
  removeItem(item) {
      var position = this.cartArray.lastIndexOf(item)
      this.cartArray.splice(position, 1)
  }

  calculateTotal() {
    var reducedTotal = this.cartArray.reduce( (previous, current) => {
      return this.total = previous + current.price
    },0)
    return reducedTotal
  }
}

interface.js-处理所有DOM组件

function iniitalize () {
  var itemList = "<table border='1|1'>";
  var shoppingCartList = document.getElementById("shoppingCartList")
  var total = document.getElementById("total")

  var eachParagraph = document.getElementsByClassName('delete-item') 

  var cart = new Cart

  function showItems() {
    for (var i = 0; i < items.length; i++) {
        itemList +="<tr>";
        itemList += "<td>" +  items[i].name + "</td>"
        itemList += "<td>" + items[i].category + "</td>"
        itemList += "<td> " + items[i].price + "</td>"
        itemList += "<td> " + items[i].stock  + "</td>" 
        itemList += ` <td> <button id=${items[i].id}>add to cart</button> </td>`
        itemList +="</tr>";
    }
    itemList += "</table>";
    document.getElementById("itemsList").innerHTML = itemList;
  }

  function renderCart() {
    var print = "";
    var indexOfItem = 0
    cart.cartArray.forEach(function(element, index) {
      print +=  `<p id=${index}  class=${index}>` +  element.name + element.price 
      + `<button id=${indexOfItem}>Remove from cart</button> </p>`
      indexOfItem ++
    })
    return print
  }

  function renderTotal(){
    cart.calculateTotal()
    return "£" + cart.total
  }

  function removeItemButtonFunctionality() {
    cart.cartArray.forEach(function(element, index) {
      shoppingCartList.addEventListener('click', () => {
        cart.removeItem(element)
      })
    })
    renderCart()
  }


  function addToButtonFunctionality() {
    items.forEach( function(element, index) {
      document.getElementById(index).addEventListener('click', () => {
        cart.add(element)
        shoppingCartList.innerHTML = renderCart()
        total.innerHTML = renderTotal()
      })
    })
  }

  showItems()
  addToButtonFunctionality() 
  removeItemButtonFunctionality()
}


window.addEventListener("DOMContentLoaded", iniitalize)

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <h1>Shopping retailer</h1>
</head>
<body>

  <div id="itemsList"></div>
<br>

<h3>Total:</h3>
<div id="total">
</div> 

  <h3>Shopping Cart:</h3>

  <p id="shoppingCartList"></p>





  <script src="src/items.js"></script>
  <script src="src/cart.js"></script>
  <script src="./interface.js"></script>
</body>
</html>

Answer 1

好吧，这段代码有很多问题。 首先，您可能在某些元素上重复了一些id。 每个id都必须是唯一的，否则您将无法使用getElementById获取元素。 通常的做法是在id的值前加上一个关键字，该关键字表示元素的确切含义。

其次，当您在initialize函数的末尾运行removeItemButtonFunctionality时，尚未呈现remove按钮元素。 这些事件处理程序需要在添加项目时动态添加。

第三，这不是问题，但是我可能会更改代码，以便在renderCart时，呈现购物车，而不是返回字符串并期望其他函数会为您完成此操作。 例如，在removeItemButtonFunctionality上，调用rederCart()时不执行任何操作。

这同样适用于renderTotal 。

因此，最后，我将代码更改如下：

function renderCart() {
  shoppingCartList.innerHTML = '';
  cart.cartArray.forEach(function(element) {
    shoppingCartList.innerHTML += `<p id="cart${element.id}">${element.name} ${element.price}<button id="remove${element.id}">Remove from cart</button></p>`;
    var removeButton = document.getElementById('remove' + element.id);
    removeButton.addEventListener('click', function() {
      cart.removeItem(element);
      renderCart();
      renderTotal();
    });
  })
}

和renderTotal ：

function renderTotal(){
  total.innerHTML = "£" + cart.calculateTotal();
}

addToButtonFunctionality将仅调用渲染函数：

function addToButtonFunctionality() {
  items.forEach( function(element, index) {
    document.getElementById(index).addEventListener('click', () => {
      cart.add(element)
      renderCart();
      renderTotal();
    })
  })
}

在该函数的结尾，您只需调用：

showItems()
addToButtonFunctionality()

无法从购物车中删除商品（在前端），但在后端可用

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-04-18 14:04:59

无法从购物车中删除商品（在前端），但在后端可用

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-04-18 14:04:59

解决方案1
2 已采纳 2019-04-18 14:04:59