javascript - 如何使代码更高效、更短？

Question

我正在制作一个代码，用户可以在其中按下五个按钮之一，点击后会被禁用。然后它应该计算每次按下并将其存储在 Firestore 数据库中，并将数字显示在按钮上。我还没有完全管理好计数(尝试过 Firestore 增量)，但这是另一个问题。我是 JavaScript 的相对新手，但我设法显示了投票数，但代码太长且效率低下。这是我的按钮代码:

<ul>
    <li class="circleProgressVote"> <!-- Bruker enkle svar slik at knappene ikke trenger å være så store-->
        <button class="btn white black-text voteBtn" id="btn1" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote1(); disableButton();"> <span id="svar1"> Svært dårlig </span> </button>
    </li>
    <li class="circleProgressVote">
        <button class="btn white black-text voteBtn" id="btn2" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote2(); disableButton();"> Dårlig </button>
    </li>
    <li class="circleProgressVote">
        <button class="btn white black-text voteBtn" id="btn3" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote3(); disableButton();"> Usikker </button>
    </li>
    <li class="circleProgressVote">
        <button class="btn white black-text voteBtn" id="btn4" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote4(); disableButton();"> Bra </button>
    </li> 
    <li class="circleProgressVote">
        <button class="btn white black-text voteBtn" id="btn5" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote5(); disableButton();"> Svært bra </button>
    </li>
</ul>

为了显示票数，我给了每个按钮自己的功能，但代码基本相同。关键是无论您按下哪个按钮，每个按钮上都会显示投票数。所以我为每个函数做了这个，其中主要是 firestore 增量代码和最后一行(设置所选按钮周围的边框)是不同的:

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

    const db = firebase.firestore();
  const increment = firebase.firestore.FieldValue.increment(1);
  const storyRef = db.collection('spørsmål').doc().collection('valg1');
  
  storyRef.update({ reads: 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';

  };
};

我知道拥有五个几乎相似的功能太长而且效率低下，但我不知道如何使它更简单。

Answer 1

做一个这样的函数:

function appendDiv(svar, doc) {
  let div = document.createElement('div');
  let votes = document.createElement('span');
  let span = document.createElement('span');

  div.setAttribute('data-id', doc.id);
  votes.textContent = doc.data().valg1;
  span.textContent = ' stemmer';

  div.appendChild(votes);
  div.appendChild(span);
  svar.appendChild(div);
}

并这样称呼它:

appendDiv(svar1, doc);
appendDiv(svar2, doc);
appendDiv(svar3, doc);
appendDiv(svar4, doc);
appendDiv(svar5, doc);