Обновить значение поля документа в зависимости от значения ils одним нажатием кнопки

Question

Foreach из моего документа коллекции категорий (5), я показываю кнопку.И я хотел бы, чтобы, когда я нажимал на кнопку, менялось значение поля «active» моего документа на «yes» или «no» в зависимости от старого значения.

Это то, что я пробовал:

    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 раз:

Answer 1

Функция buttonFc () добавляет новый обработчик событий при каждом его вызове, так что в результате вы получаете несколько списков событий для одной и той же кнопки.Это объясняет, почему цикл становится «больше» каждый раз.Убедитесь, что вы добавляете списки событий только один раз.