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>