Блог

Я использую Javascript для создания HTML-формы с несколькими вопросами о переключателях и одним вопросом о флажках в конце. Причина, по которой я использую JavaScript, заключается в том, что вопросы берут данные из базы данных Google Cloud Firestore, и они должны быть динамическими. когда я получаю данные с переключателей, они отображаются в виде строки, но когда я получаю данные из флажков, они остаются пустыми. Я хочу, чтобы он отображал строку со списком установленных флажков. Вот мой код:

 const OACanList = document.querySelector('#OAInput');
const setupOACans = (data) => {
  let html = '';
  if (data.length) {
    data.forEach(doc => {
        const OACan = doc.data();
        const li = `
        <style>
        #OAInput [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
            position: static;
            opacity: 1;
            pointer-events: initial;
        }
        </style>
          <input type="checkbox" name="OAElection" value="${OACan.name}" style="display:block opacity:1;">${OACan.name}
          <br>
        `;
        html  = li
    });
    OACanList.innerHTML = html;
  } else {
      OACanList.innerHTML = html;
  };
};
 

index.js:

  const voteForm = document.querySelector('#vote-form');
  voteForm.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('ballots').add({
          OA: voteForm.OAElection.value
        }).then(() => {
          const modal = document.querySelector('#modal-vote');
          M.Modal.getInstance(modal).close();
          voteForm.reset();
      }).then(() => {
        const docRef = db.collection('users').doc(auth.currentUser.uid);
        docRef.get().then(function(doc) {
            doc.data().count  ;
        })
      });
  });