在单击单个按钮时根据 ils 值更新文档字段值答案

【问题标题】：Update document field value depending ils value on single button click在单击单个按钮时根据 ils 值更新文档字段值
【发布时间】：2019-09-23 11:21:09
【问题描述】：

对于我的“类别”集合文档 (5)，我正在显示一个按钮。我想当我点击我的按钮时，它会根据旧值将我的文档“活动”字段的值更改为“是”或“否”。

这是我尝试过的：

    db.collection("categories").orderBy("id", "asc").onSnapshot(snapshot =>
    {
        let changes = snapshot.docChanges();

        changes.forEach(change =>
        {
            if (change.type == "added" || change.type == "removed")
            {
                renderNavItems(change.doc);
                renderTab(change.doc);
                renderButtons(change.doc);
            }
            else if(change.type == "modified")
            {
                buttonFc(change.doc);
            }
         })
     });

RenderButtons() 功能：（仅一次）

var buttons;
var button;
var buttonDiv;


function renderButtons(doc)
{
    button = document.createElement("button");
    buttonDiv = document.createElement("div");

    buttonDiv.setAttribute("class","btnDiv"+doc.data().id);

        if (doc.data().active == "yes")
        {
            button.setAttribute("class", "btn btn-success btn-sm btnView");
            button.textContent= "Slide activée";
        }
        else if (doc.data().active == "no")
        {
            button.setAttribute("class", "btn btn-danger btn-sm btnView");
            button.textContent= "Slide desactivée";
        }

    buttonDiv.appendChild(button);

    var tab = document.querySelector("#"+doc.data().name);
    tab.appendChild(buttonDiv);

    buttonFc(doc);
}

buttonFc() 函数：（每次我的字段值都会改变）

function buttonFc(doc)
{
    DocRef = db.collection("categories").doc(doc.id);

    if (doc.data().active == "yes")
    {
        button.addEventListener('click', () => 
        {
            console.log("YES TO NO");
            DocRef.update({
                "active": "no"
        })
    });

}
else if (doc.data().active == "no")
{

    button.addEventListener('click', () => 
    {
        console.log("NO TO YES");
        DocRef.update({
            "active": "yes"
            })
    });
}

但是，当我点击一个按钮时，我的函数会循环，并且每次循环都会变大。

当我点击 5 次时：

【问题讨论】：

标签： javascript html google-cloud-firestore

【解决方案1】：

buttonFc() 函数在每次调用时都会添加一个新的事件监听器，因此您最终会在同一个按钮上拥有多个事件监听器。这解释了为什么循环每次都变得“更大”。确保只添加一次事件监听器。

【讨论】：