Как я могу сделать код более эффективным и коротким?

Question

Я делаю код, где пользователь может нажать одну из пяти кнопок, которые отключаются после щелчка. Затем он должен считать каждое нажатие и сохранять его в базе данных пожарного депо, а номер указывать на кнопке. Я еще не совсем справился с подсчетом (пробовал прирост пожара), но это уже другой вопрос. Я новичок в 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>

Чтобы отобразить количество голосов, я дал каждой кнопке свою функцию, но это, по сути, один и тот же код. Дело в том, что количество голосов появляется на каждой кнопке независимо от того, что вы нажимаете. Так что я сделал это для каждой из функций, где в основном это код приращения пожарного депо и последняя строка (которая устанавливает границу вокруг выбранной кнопки), которая отличается:

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);