Javascript 在前端的Firebase Firestore中如何计数

我正在创建一个应用程序，允许用户跟踪新习惯，使用Firestore保存用户数据。 数据库中存储的数据如下所示：

• 标题（习惯名称）
• 计数（我养成了多少次这个习惯）
• 目标（我想每天/每周/每月检查多少次这个习惯）
• 连胜（我连续几天/几周/几个月/检查了这个习惯）

我的目标是基本上单击一个对象（在本例中是容器中的火焰），并在数据库中累积计数

这就是我现在得到的：

// Real-time listener
db.collection('habits').onSnapshot((snapshot) => {
    snapshot.docChanges().forEach(change => {
        if(change.type === 'added'){
            renderHabit(change.doc.data(), change.doc.id);
        }
    });
})

// Add new habit
const form = document.querySelector('form');
form.addEventListener('submit', evt => {
    evt.preventDefault();
    const habit = {
        title: form.habitTitle.value,
        count: 0,
        goal: form.habitGoal.value,
        streak: 0
    };

    db.collection('habits').add(habit)
        .catch(err => console.log(err));
    form.habitTitle.value = '';
    form.habitGoal.value = '';
})

// Update counter
const habitContainer = document.querySelector('.newHabit');
habitContainer.addEventListener('click', evt => {
    //console.log(evt);
    if(evt.target.tagName === 'I'){
        const id = evt.target.getAttribute('data-id');
        db.collection('habits').doc(id).update({
            count: 1
        });
    }
});

const habits = document.querySelector('.newHabit');

// Render habit data
const renderHabit = (data, id) => {
    const html = `
        <div id="wrapper" data-id="${id}">
            <div id="container">
                <span id="title">${data.title}</span>
                <div class="streakContainer">
                    <span id="streak">${data.streak}</span>
                    <i data-id="${id}">The easiest way to increment a number in the database is with the 
increment
 operator:


habitContainer.addEventListener('click', evt => {
    if(evt.target.tagName === 'I'){
        const id = evt.target.getAttribute('data-id');
        db.collection('habits').doc(id).update({
            count: firebase.firestore.FieldValue.increment(1)
        });
    }
});

//实时侦听器
db.collection（'habits'）.onSnapshot（（快照）=>{
snapshot.docChanges（）.forEach（更改=>{
如果（change.type==‘已添加’）{
renderHabit（change.doc.data（），change.doc.id）；
}
});
})
//增加新习惯
const form=document.querySelector（'form'）；
form.addEventListener（'submit'，evt=>{
evt.preventDefault（）；
常量习惯={
标题：form.habitTitle.value，
计数：0，
目标：form.habitGoal.value，
连胜：0
};
db.collection（‘习惯’）.add（习惯）
.catch（err=>console.log（err））；
form.habitTitle.value=''；
form.habitGoal.value=''；
})
//更新计数器
const habitContainer=document.querySelector（'.newHabit'）；
habitContainer.addEventListener（'click'，evt=>{
//控制台日志（evt）；
如果（evt.target.tagName=='I'）{
const id=evt.target.getAttribute（'data-id'）；
db.collection（'habits'）.doc（id）.更新({
计数：1
});
}
});
const habits=document.querySelector（'.newhabits'）；
//呈现习惯数据
const renderHabit=（数据，id）=>{
常量html=`
${data.title}
${data.streak}
在数据库中递增数字的最简单方法是使用
increment
运算符：

每次调用此函数时，您的
onSnapshot
侦听器将再次调用更新后的文档{
在那里可以在UI中显示更新的值/文档。
你的代码中
countNumber
在哪里？你在前端使用任何类型的状态容器吗？@jmargolisvt我已经从我的代码中删除了
countNumber
，因为它不起作用，但我在JS文件的顶部声明了它。太好了！谢谢。我不知道是什么原因首先，我要输入
if（change.type=='changed'）{}
来更新用户界面..哦，顺便说一句，
'changed'
不是应该是
'modified'
吗？哎呀。那很可能是：）嗨，弗兰克，我一直在努力更新用户界面，但我似乎弄不明白。我到目前为止：
如果（change.type=='modified'）{const habitUpdate=document.querySelector（'#wrapper[data id=“”+change.doc.id+“”）；//li.childNodes[0]。textContent=change.doc.data（）.count；habitUpdate.update（）；}
关于如何改进以使UI也得到更新的任何提示？乍一看，这看起来不错。您是否也在更新元素的
innerHTML
？如果您无法理解，可能值得发布一个只包含更新部分的新问题（看看您是否可以在不使用Firestore的情况下得到相同的问题）。终于开始工作了。我所要做的就是将
.querySelector
更改为
id
，其中更新的值位于第一位，因此删除
.childNodes[]
。无论如何，感谢您的帮助！