如何获取listpanier商品项并在HTML实时展示？现有代码无控制台输出

我有一个包含商品的采购订单，每次添加或移除商品时，我的listbasket对象会新增对应商品或执行反向操作，它是获取商品数量并在HTML实时展示的最佳数据源。但我尝试了以下代码后，cart变量在控制台无输出：

原代码 #

JavaScript部分

obj.listpanier = function() {
  var panierCopy = [];
  for (i in panier) {
    item = panier[i];
    itemCopy = {};
    console.log("item", item)
    for (p in item) {
      itemCopy[p] = item[p];
    }
    itemCopy.total = Number(item.prix * item.quantite).toFixed(decimal);
    panierCopy.push(itemCopy)
  }
  return panierCopy;
}

var panier = MonPanier.listpanier();

for (var i = 0; i < panier.length; i++) {

  var produit = panier[i].nom;
  var quantite = panier[i].quantite;
  console.log("quantitequantite", quantite)

  var li = document.createElement("li");
  li.innerHTML = '<span class="produit">' + produit + '</span>' +
    '<span class="quantite">' + quantite + '</span>';

  console.log("quantiteli", li)
  document.querySelector(".panier ul").appendChild(li);
}

HTML部分

<ul>
  <li>
    <div class="row mt-4">
      <div class="col-md-4">
        <p>Produit 03 (12.00 €)</p>
      </div>
      <div class="col-md-6 text-end">
        <a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" data-qte="1" class="btn btn-primary ajouter-panier">ajouter au panier</a>
      </div>
      <div class="col-md-6 text-end">
        <a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" data-qte="1" class="btn btn-primary retirer-panier">retirer-panier</a>
      </div>
    </div>
  </li>
</ul>

核心问题及修复步骤 #

• 变量作用域污染：循环内的i、item、itemCopy未声明，会成为全局变量，导致循环逻辑混乱，需用let/var声明。
• 未定义变量报错：toFixed(decimal)中的decimal未定义，直接使用会抛出错误，导致listpanier函数执行失败，需指定具体小数位数（如2）。
• 对象引用不匹配：定义的是obj.listpanier，调用的却是MonPanier.listpanier()，需统一对象引用。
• 缺少事件监听：现有代码仅初始化一次购物车，未绑定添加/移除按钮的点击事件，无法实时更新UI。
• DOM选择器无效：document.querySelector(".panier ul")找不到目标元素，需调整HTML结构或选择器。

修复后的完整代码 #

HTML部分（调整容器结构）

<div class="panier">
  <h3>购物车</h3>
  <ul id="cart-items"></ul>
  <ul>
    <li>
      <div class="row mt-4">
        <div class="col-md-4">
          <p>Produit 03 (12.00 €)</p>
        </div>
        <div class="col-md-6 text-end">
          <a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" data-qte="1" class="btn btn-primary ajouter-panier">ajouter au panier</a>
        </div>
        <div class="col-md-6 text-end">
          <a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" data-qte="1" class="btn btn-primary retirer-panier">retirer-panier</a>
        </div>
      </div>
    </li>
  </ul>
</div>

JavaScript部分（完善逻辑与事件绑定）

// 购物车核心对象，包含数据与操作方法
const MonPanier = {
  panier: [],
  decimal: 2,
  // 生成购物车副本并计算总价
  listpanier: function() {
    const panierCopy = [];
    for (let i in this.panier) {
      const item = this.panier[i];
      const itemCopy = {...item};
      itemCopy.total = Number(item.prix * item.quantite).toFixed(this.decimal);
      panierCopy.push(itemCopy);
    }
    return panierCopy;
  },
  // 添加商品
  ajouterProduit: function(produitData) {
    const existingItem = this.panier.find(item => item.nom === produitData.nom);
    if (existingItem) {
      existingItem.quantite += parseInt(produitData.qte);
    } else {
      this.panier.push({
        nom: produitData.nom,
        prix: parseFloat(produitData.prix),
        quantite: parseInt(produitData.qte)
      });
    }
    this.mettreAJourUI();
  },
  // 移除商品
  retirerProduit: function(produitData) {
    const existingItem = this.panier.find(item => item.nom === produitData.nom);
    if (existingItem) {
      existingItem.quantite -= parseInt(produitData.qte);
      if (existingItem.quantite <= 0) {
        this.panier = this.panier.filter(item => item.nom !== produitData.nom);
      }
      this.mettreAJourUI();
    }
  },
  // 更新购物车UI
  mettreAJourUI: function() {
    const cartList = document.querySelector("#cart-items");
    cartList.innerHTML = '';
    const panier = this.listpanier();
    console.log("当前购物车数据:", panier);
    for (let i = 0; i < panier.length; i++) {
      const produit = panier[i].nom;
      const quantite = panier[i].quantite;
      const li = document.createElement("li");
      li.innerHTML = `<span class="produit">${produit}</span><span class="quantite">${quantite}</span>`;
      cartList.appendChild(li);
    }
  }
};

// 绑定按钮事件与初始化UI
document.addEventListener('DOMContentLoaded', function() {
  // 添加商品按钮
  document.querySelectorAll('.ajouter-panier').forEach(btn => {
    btn.addEventListener('click', function() {
      const produitData = {
        nom: this.dataset.nom,
        prix: this.dataset.prix,
        qte: this.dataset.qte
      };
      MonPanier.ajouterProduit(produitData);
    });
  });
  // 移除商品按钮
  document.querySelectorAll('.retirer-panier').forEach(btn => {
    btn.addEventListener('click', function() {
      const produitData = {
        nom: this.dataset.nom,
        prix: this.dataset.prix,
        qte: this.dataset.qte
      };
      MonPanier.retirerProduit(produitData);
    });
  });
  
  // 初始化购物车UI
  MonPanier.mettreAJourUI();
});

修复说明 #

1. 给MonPanier补充了完整的商品操作方法，统一通过mettreAJourUI更新UI，确保操作后实时刷新。
2. 修复变量作用域问题，避免全局污染导致的逻辑错误。
3. 定义decimal变量解决toFixed参数缺失问题。
4. 调整HTML结构，新增购物车专属列表容器，确保DOM选择器有效。
5. 绑定按钮点击事件，实现添加/移除商品的交互逻辑。

内容的提问来源于stack exchange，提问作者ariane