使用javascript创建单选按钮html表单，它不断创建重复的ID

Question

我正在使用Javascript创建一个带有单选按钮问题的HTML表单。我使用JavaScript的原因是，这些问题从谷歌云消防商店数据库中获取数据，并且需要是动态的。这是我的代码：

const splCanList = document.querySelector('#SPLInput');
const setupSPLCans = (data) => {
let html = '';
if (data.length) {
data.forEach(doc => {
const SPLCan = doc.data();
const li = `
<style>
#SPLInput [type="radio"]:not(:checked), [type="radio"]:checked {
position: static;
opacity: 1;
pointer-events: initial;
}
</style>
<input type="radio" name="SplElection" id="SPL" value="${SPLCan.name}" style="display:block opacity:1;">${SPLCan.name}
<br>
`;
html += li
});
splCanList.innerHTML = html;
} else {
splCanList.innerHTML = html;
};
};

每当我试图将答案发送到数据库时，它都会随机选择一个答案，因为ID都是相同的。如何使每个答案的ID不同，并且仍然只使用1行将响应添加到数据库中。我已经放入螺栓我只需要1行的位置。

const voteForm = document.querySelector('#vote-form');
voteForm.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('ballots').add({
// **
SPL: voteForm.SPL.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++;
})
});
});

Answer 1

删除id属性
表单元素不需要id就可以加入，它们只需要一个名称

如下：

<input type="radio" name="SplElection" value="${SPLCan.name}" style="display:block opacity:1;">${SPLCan.name}

和

// *************
SPL: voteForm.SplElection.value,
// *************