Question

我正在编写一个代码，使用户可以按五个按钮之一，单击后将被禁用。然后应该计算每次按下的次数，并将其存储在Firestore数据库中，并且数字将显示在按钮上。我还没有完全管理计数（尝试过的Firestore增量），但这是另一个问题。我是javascript新手，但我设法显示了投票数，但是代码太长且效率低下。这是我的按钮代码：


const [state, setState] = useState({name: '', requested: false});

useEffect(() => {
    HTTP_Service.getName().then(name => {
      setCompanyInfo({name, requested: true})
    });

}, []);

const {name, requested} = state

return ({requested ? <Text>Loading...</Text> : <View>
    <Controller
        as={
        <Input               
          label={t('name')}
          placeholder={t('name')}
        />
        }
        defaultValue={name}
        control={control}
        name="name"
        onChange={args => args[0].nativeEvent.text}
    />
</View>});

要显示投票数，我为每个按钮提供了自己的功能，但是基本上是相同的代码。关键是无论您按下哪个按钮，票数都会显示在每个按钮上。因此，我对每个函数进行了设置，这些函数的主要存储区增量代码和最后一行（用于设置所选按钮周围的边框）的主要区别在于：

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

我知道拥有这些几乎相同的功能中的五个功能太长且效率低下，但是我不知道该如何简化它。抱歉，如果发布时间太长。谢谢

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

如何使代码更高效，更短？

1 个答案: