Question

我使用以下代码动态创建单选按钮作为函数的一部分：

for(var j=0; j<currentQuestion.choices.length; j++){
    var choiceText = currentQuestion.choices[j];
    var newRadioButton = document.createElement("input");
    newRadioButton.name="optionsList";
    newRadioButton.type="radio";
    newRadioButton.value = choiceText;

    newRadioButton.innerHTML = choiceText;
    label.appendChild(newRadioButton);
}

单选按钮已成功创建，但仍有2个问题：

1）每个单选按钮的innerHTML没有显示在浏览器中，虽然它在我控制台登录每个单选按钮时显示。所以在浏览器中，我看到旁边没有文字的单选按钮，但控制台显示输入标签之间有文字

2）我无法弄清楚如何引用动态创建的单选按钮以便稍后检查哪一个已被选中。

我已经尝试了

var radioButtonsGroup = document.label1.optionsList;

或

var radioButtonsGroup = document.getElementsByName("optionsList");

或

var radioButtonsGroup = document.getElementsByTagName("inputs");

但他们都返回undefined。

Answer 1

输入元素不支持内部text / html。您应该为每个单选按钮添加标签并将其与之关联。代码如下：

for(var j=0; j<currentQuestion.choices.length; j++){
    var choiceText = currentQuestion.choices[j];
    var id = "radio-id-" + j;
    var p = document.createElement("p");

    var newRadioButton = document.createElement("input");
    var text = document.createElement("label");
    newRadioButton.name="optionsList";
    newRadioButton.type="radio";
    text.innerHTML = choiceText;
    text.htmlFor = id;

    p.appendChild(newRadioButton);
    p.appendChild(text);

    label.appendChild(p);
}

在Javascript中选择动态创建的单选按钮组并获取要显示的内部文本

1 个答案: