javascript - 如何将点击添加到 html 中的产品列表并获取点击到 firestore 的项目

Question

我正在尝试使用 Django 和 Firebase Admin SDK 制作一个简单的购物车，我已查询列表中的 Firestore 数据并以 HTML 形式显示它们，现在我想向项目列表添加一个点击监听器并获取该项目使用 JavaScript 单击进入 Firestore 集合。现在，当我单击第一个项目以外的项目时，没有任何反应，也就是说，当我单击页面上显示的第一个项目时，一切正常，但另一个则不然。

python view.py 显示项目

def home(request):
    collection_ref = db.collection(u'products').get()
    documents = list(doc.to_dict() for doc in collection_ref)
    return render (request,'store/home.html',{'product':documents})

home.html

{% block content %}
   {% for doc in product %}
<div class="jumbotron">
<div class="col-sm-4">
<div class="card" >
 <div class="card-body">
<a href="#" class="img-prod"><img class="img-fluid" id="productUrl" src="{{doc.productImage}}"  alt="{{doc.productName}}">
 <h1 class="card-title" id="productName">{{doc.name}}</h1>
 <p class="card-subtitle mb-2 text-muted" id="productPrice">{{doc.price}}</p>
 <p class="card-text" id="productDescription">{{doc.description}}</p>
<button type="button" id="addtocart">Add to cart</button>
 </div>
 </div>
</div>
</div>
{% endfor %}
{% endblock content %} 

js代码

 firebase.initializeApp(firebaseConfig);
      var db = firebase.firestore();
     var addToCart=document.getElementById('addtocart');

     addToCart.addEventListener('click', (event) =>{
     var image=document.getElementById('productUrl').src;
     var  productName = document.getElementById('productName').innerHTML;
     var productPrice=  document.getElementById('productPrice').innerHTML;
    db.collection("orders").add({
   pName: productName,
   price: productPrice,
   url:image
   })
   .then(function(docRef) {
  console.log("Document written with ID: ", docRef.id);
   })
   .catch(function(error) {
  console.error("Error adding document: ", error);
   });
                })

Answer 1

您应该始终尝试在整个文档中保持 id 的唯一性。 findElementById 仅返回它找到的第一个元素，因此仅在运行时才向第一个列表项添加监听器

var addToCart=document.getElementById('addtocart');
addToCart.addEventListener('click', (event) =>{...

您应该在 javascript 中定义一个接受参数的 add_to_cart 函数，然后在 html 的 for 循环中您可以有类似的内容

<button onclick="add_to_cart({{doc.name}},{{doc.price}})>Add to cart</button>"