我用 javascript 創建的單選按鈕沒有顯示

Question

我正在使用 firebase Cloud Firestore 在選舉中保存多個候選人的姓名。 我正在嘗試使用 JavaScript 創建一個表單，在單選按鈕中顯示每個候選人的姓名。 我已將腳本連接到我的表單，但未顯示單選按鈕。 它顯示名稱，但不顯示按鈕。 該表單處於彈出模式中。 控制台中沒有錯誤。

這是我的代碼：

    const splCanList = document.querySelector('#SPLInput');
const setupSPLCans = (data) => {
  let html = '';
  if (data.length) {
    data.forEach(doc => {
        const SPLCan = doc.data();
        const li = `
          <input type="radio" name="SplElection" id="${SPLCan.name}" value="${SPLCan.name}" style="display:block;">${SPLCan.name}
          <br>
        `;
        html += li
    });
    splCanList.innerHTML = html;
  } else {
      splCanList.innerHTML = html;
  };
};

Answer 1

這里有很多缺失的部分，但據我所知，這應該可行。

您沒有在任何地方執行setupSPLCans function，我必須填補data形狀的空白。

但是我所做的更改可能是您的代碼中的錯誤：

• 我將html聲明上移了一個塊，以便您的 else 子句可以訪問
• 您使用的材料 CSS 帶有自動隱藏的收音機。 我添加了一些 CSS 來應對

 const splCanList = document.querySelector('#SPLInput'); const setupSPLCans = (data) => { let html = ''; // <-- moved this up a line if (data.length) { data.forEach(doc => { const SPLCan = doc.data(); const li = ` <input type="radio" name="${SPLCan.name}" id="${SPLCan.name}" value="${SPLCan.name}" style="display:block;">${SPLCan.name} <br> `; html += li }); splCanList.innerHTML = html; } else { splCanList.innerHTML = html; }; }; setupSPLCans([ // <-- made some assumptions based on your code { data: () => ({ name: 'name1' }), }, { data: () => ({ name: 'name2' }), }, ]);

 #SPLInput [type="radio"]:not(:checked), [type="radio"]:checked { position: static; opacity: 1; pointer-events: initial; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <div id="SPLInput"></div>