我的使用javascript创建的单选按钮没有显示
匿名的
我正在使用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;
};
};
多米尼克
这里有很多缺失的部分，但是据我所知这应该可行。
您没有在setupSPLCans任何地方执行该功能，而我不得不填补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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用jQuery在表列中显示没有标签的单选按钮
- 2
如何在没有 javascript 的 asp.net-core 中使用单选按钮过滤我的部分视图？
- 3
我的按钮没有显示
- 4
为什么我的默认单选按钮没有显示在模型中？
- 5
如何使用javascript动态创建单选按钮？
- 6
我尝试使用 Javascript 创建叠加层，但叠加层没有显示
- 7
当我使用媒体查询时，Html 单选按钮没有选中功能？
- 8
证明：为什么我的单选按钮没有价值？
- 9
当使用CSS单击特定的单选按钮时，有没有一种显示文本的方法？
- 10
使用Javascript基于单选按钮显示/隐藏字段集
- 11
使用FormHelper显示单选按钮
- 12
使用FormHelper显示单选按钮
- 13
如何取消选中没有单选按钮的单选按钮？
- 14
如何取消选中没有单选按钮的单选按钮？
- 15
有没有办法在角度 6 的嵌套 JSON 中动态显示单选按钮？
- 16
使用javascript选择所有选项A单选按钮
- 17
为什么我的左边距没有应用到我的单选按钮上？
- 18
使用JavaScript的单选按钮样式
- 19
使用javascript选择单选按钮。
- 20
使用JavaScript验证单选按钮
- 21
onclick使用javascript单选按钮
- 22
没有标签的样式单选按钮
- 23
没有标签的样式单选按钮
- 24
没有圆形但矩形标签的单选按钮
- 25
显示仅带有文本的单选按钮
- 26
如何创建具有打开和关闭功能的单选按钮以显示图像？
- 27
我怎样才能给这个单选组赋予按钮色彩，我的 xml 中没有单选按钮，只有一个组
- 28
为什么我的按钮没有显示文字？
- 29
为什么我的WPF单选按钮没有垂直居中对齐？
我来说两句