我用 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 函数，我不得不填补 data 形状的空白。

但是我所做的更改可能是您代码中的错误：

我将 html 声明向上移动了一个块，以便您的 else 子句可以访问它
您使用的material 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>

我用 javascript 创建的单选按钮没有显示

My radio buttons, created with javascript, are not showing up

javascript

forms

radio-button

materialize

google-cloud-firestore