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

Question

I am using firebase cloud firestore to hold several candidates' names in an election. I am trying to use JavaScript to create a form that shows each candidates' name in radio buttons. I have the script connected to my form, but the radio buttons don't show. It shows the name, but not the button. The form is in a popup modal. There are no errors in the console.

Here is my code:

    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

There are a lot of missing pieces here but from what I can tell this should work.

You didn't execute the setupSPLCans function anywhere and I had to fill in the gaps what the data shape is.

But what I did change that may have been bugs in your code is:

• I moved the html declaration up one block so that's accessible to your else clause
• The material CSS you used comes with radios being hidden automatically. I added some CSS to counter that

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>