Javascript 使用按钮单击更新从Firestore For循环中返回的值

我目前有一个基本的CRUD网站，我最近开始工作，列出了一些产品和相关的价格。我的技能不是最好的，但我正在打好这场比赛，我希望得到一些帮助/指导来实现我的目标

我将数据存储在Firestore数据库中，并将其提取并显示在列表中。为了显示它，我将我的子集合中的值添加到一个数组中，然后我使用for循环来循环并提取每个值，并使用html模板字符串显示它。我决定，因为我有了创建和显示这方面的一个体面的点，我想添加一个按钮（或在我的情况下一个图标），这将允许我编辑返回的每个值

    const shelf = doc.data();
    doc.ref.collection("products").get().then((Snapshot) => {
        const products = Snapshot.docs.map(doc => doc.data());


        // start of for loop
        for(let product of products){

        // start of template string inside backticks
        const li = `
            <p><div>${product.name} <div class="right"><font class=pink-text>Price:</font> $${product.price}  <a href="#" class="grey-text modal-trigger" data-target="modal-priceedit"><i class="material-icons">create</i></a></div></div></p>
        `;
        // end of template string inside backticks  

        html += li;                 


        // start of edit price section
        let price = product.price;                  

        const priceeditForm = document.querySelector('#priceedit-form');
        priceeditForm.addEventListener('submit', (e) => {
          e.preventDefault();

            console.log("Document with ID: ", doc.id);
            doc.ref.collection("vendors").doc(price)get().then((Snapshot) => {
                const priceedit = Snapshot.docs.map(doc => doc.data());
             price: priceeditForm['price'].value

            }).then(() => {
            // close the signup modal & reset form
            const modal = document.querySelector('#modal-priceedit');
            M.Modal.getInstance(modal).close();
            priceeditForm.reset();
          }).catch(err => {
            console.log(err.message);
          });
        });
        //end of edit price section 


        }
       // end of for loop           


        productList.innerHTML = html;           
        });

const shelf=doc.data（）；
doc.ref.collection（“产品”）.get（）然后（（快照）=>{
const products=Snapshot.docs.map（doc=>doc.data（））；
//for循环的开始
对于（产品中的产品）{
//背景标记中模板字符串的开头
常数李=`
${product.name}价格：$${product.Price}

`;
//反勾号内模板字符串的结尾
html+=li；
//开始编辑价格部分
让价格=产品价格；
const priceeditForm=document.querySelector（“#priceedit form”）；
priceeditForm.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
console.log（“ID为，doc.ID的文档”）；
doc.ref.collection（“供应商”）.doc（price）get（）。然后（（快照）=>{
const priceedit=Snapshot.docs.map（doc=>doc.data（））；
价格：priceditform['price'].值
}).然后（（）=>{
//关闭注册模式和重置表单
const modal=document.querySelector（“#modal priceedit”）；
M.Modal.getInstance（Modal.close（）；
priceeditForm.reset（）；
}).catch（错误=>{
控制台日志（错误消息）；
});
});
//编辑价格部分结束
}
//循环结束
productList.innerHTML=html；
});

我希望当点击图标时，一个模型弹出一个单一的价格输入字段，我可以输入新的价格并提交，从而更新数据库中的值

我将非常感谢任何能在这方面帮助我的人。先谢谢你

---

感谢所有在这方面提供帮助的人。我决定从头开始重新编写代码，使用DOM元素追加子元素。一旦这样做了，一切都变得简单多了。决定对其进行更改，以便在代码方面给自己更大的灵活性。

感谢所有在这方面提供帮助的人。我决定从头开始重新编写代码，使用DOM元素追加子元素。一旦这样做了，一切都变得简单多了。决定对其进行更改，以使自己能够更灵活地处理代码。

您能再次检查代码格式是否保持不变吗？例如，看起来有些数据是对齐的，因此For循环只打印4

console.log

s，然后结束。感谢您的响应。console.log就在那里，因此我可以确保它正在提取我需要的值。因此，for循环接受返回的名为products的数组（[{name，price}，{name，price}]），然后从中提取值，并在html中添加值，因为它在${product.name}price:$$${product.price}周围循环。您能再次检查代码格式是否保持不变吗？例如，看起来有些数据是对齐的，因此For循环只打印4

console.log

s，然后结束。感谢您的响应。console.log就在那里，因此我可以确保它正在提取我需要的值。因此for循环接受返回的名为products的数组（[{name，price}，{name，price}]），然后从中提取值，并在html中循环${product.name}price:$$${product.price}时添加值。