Показать увеличенные значения из магазина

Question

Я пытаюсь сделать несколько кнопок почти как система голосования. Пользователь может нажать 5 разных кнопок, и количество голосов на каждой кнопке сохраняется в Firestore. После нажатия кнопки включения значение должно отображаться на каждой кнопке, и в этом моя проблема. Я сделал код, который увеличивает значение и показывает количество голосов, но он не работает на кнопке, которую нажал пользователь. Например, если я нажимаю кнопку 1, на всех остальных кнопках отображается правильное количество голосов, но на нажатой кнопке отображается только один голос, хотя он имеет несколько голосов. Это также происходит с любой другой кнопкой, и проблема возникает только на нажатой кнопке. Прошу прощения, если это слишком долго, но я относительно javascript. Вот мой код:

            <ul>
              <li class="circleProgressVote"> 
                <button class="btn white black-text voteBtn" id="btn1"  onclick="vote1(); disableButton();"> Svært dårlig </button>
              </li>
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn2"  onclick="vote2(); disableButton();"> Dårlig </button>
              </li>
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn3"  onclick="vote3(); disableButton();"> Usikker </button>
              </li>
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn4"  onclick="vote4(); disableButton();"> Bra </button>
              </li> 
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn5"  onclick="vote5(); disableButton();"> Svært bra </button>
              </li>
            </ul>



function vote1() {
  console.log('ans1');


  const valg1 = db.collection('spørsmål').doc('BdTGAbGw33HSr9GZoJYA');
  valg1.update({ 'valg1': increment });


  db.collection('spørsmål').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
      hentSvar1(doc);
    });
  });

  function hentSvar1(doc) {


    let div1 = document.createElement('div');
    let votes1 = document.createElement('span');
    let span1 = document.createElement('span');

    div1.setAttribute('data-id', doc.id);
    votes1.textContent = doc.data().valg1;
    span1.textContent = ' stemmer';

    div1.appendChild(votes1);
    div1.appendChild(span1);

    let div2 = document.createElement('div');
    let votes2 = document.createElement('span');
    let span2 = document.createElement('span');

    div2.setAttribute('data-id', doc.id);
    votes2.textContent = doc.data().valg2;
    span2.textContent = ' stemmer';

    div2.appendChild(votes2);
    div2.appendChild(span2);

    let div3 = document.createElement('div');
    let votes3 = document.createElement('span');
    let span3 = document.createElement('span');

    div3.setAttribute('data-id', doc.id);
    votes3.textContent = doc.data().valg3;
    span3.textContent = ' stemmer';

    div3.appendChild(votes3);
    div3.appendChild(span3);

    let div4 = document.createElement('div');
    let votes4 = document.createElement('span');
    let span4 = document.createElement('span');

    div4.setAttribute('data-id', doc.id);
    votes4.textContent = doc.data().valg4;
    span4.textContent = ' stemmer';

    div4.appendChild(votes4);
    div4.appendChild(span4);

    let div5 = document.createElement('div');
    let votes5 = document.createElement('span');
    let span5 = document.createElement('span');

    div5.setAttribute('data-id', doc.id);
    votes5.textContent = doc.data().valg5;
    span5.textContent = 'stemmer';

    div5.appendChild(votes5);
    div5.appendChild(span5);



    svar1.appendChild(div1);
    svar2.appendChild(div2);
    svar3.appendChild(div3);
    svar4.appendChild(div4);
    svar5.appendChild(div5);


    document.getElementById('btn1').style.border = '2px solid red';

  };
};

Все функции Vote1 () - Vote5 () одинаковы, без последней строки, изменяющей границу выбранной кнопки, функция приращения сверху, которая увеличивает пять различных полей. в firestore и функция внутри называется "hentSvar1", "hentSvar2" и так далее. Я попытался использовать then () после кода приращения и просто поместил его в оставшуюся часть кода, чтобы посмотреть, поможет ли это, но это не сработало. Я также знаю, что функция показа значений слишком длинная и неэффективная, но опять же я относительно новичок в javascript. Вот база данных в Firestore, если кому-то это нужно: valg1 - valg5 - это те поля, которые связаны с каждой кнопкой и являются обновлениями и отображаются на дисплее. Извините, если это слишком долго, но я не могу понять, в чем проблема. Если бы кто-нибудь из вас мог помочь мне, я был бы очень признателен. Спасибо.

Answer 1

Документация для update гласит, что этот метод является асинхронным и возвращает обещание, но вы не ожидаете завершения обещания перед прочтением документа. Это может объяснить, почему значения не обновляются должным образом. Я бы предложил добавить обратные вызовы then () и catch (), как показано в этом фрагменте из документации Firestore :

var washingtonRef = db.collection("cities").doc("DC");

// Set the "capital" field of the city 'DC'
return washingtonRef.update({
    capital: true
})
.then(function() {
    console.log("Document successfully updated!");
})
.catch(function(error) {
    // The document probably doesn't exist.
    console.error("Error updating document: ", error);
});

Отдельно есть две вещи, которые могут не относиться к проблема под рукой, но это может быть полезно.

• Вы извлекаете всю коллекцию spørsmål, даже если вам нужен только один документ из нее. Учитывая, что вы знаете идентификатор документа, который используется BdTGAbGw33HSr9GZoJYA, было бы лучше просто получить этот документ с помощью db.collection('spørsmål').doc('BdTGAbGw33HSr9GZoJYA').get(). Отметьте this .
• Впервые я увидел синтаксис { fieldname : increment } вместо { fieldname: FieldValue.Increment(number)}, который я нашел в веб-API ссылка . Возможно, синтаксис также правильный, поскольку, если честно, я больше привык к клиентским библиотекам Node.js и Python.

Наконец, вы можете рассмотреть возможность реализации в режиме реального времени. слушатели , чтобы получать уведомления об изменениях в документе и, таким образом, отправлять новые данные без необходимости запрашивать их самостоятельно. Хотя это может показаться излишним для данного примера, было бы полезно упростить некоторые схемы, приближающиеся к обновлениям пользовательского интерфейса, более оперативно.