javascript - 从对象元素创建单选按钮列表

Question

我有一个对象数组，我想获取其中一个对象并从对象内容创建一个单选按钮列表。到目前为止，这是我的代码。

var allQuestions = [{question: "This is question number one", choices: ["one", "two", "three", "four"], correctAnswer:"two"},{question: "This is question number two", choices: ["dog", "cat", "bear", "lion"], correctAnswer:"bear"}];

var currentQuestion = allQuestions[1].question;

document.getElementById('question').innerHTML = currentQuestion;

function choiceList() { 

    for (choices in allQuestions[0]) {

    var choiceSelection = document.createElement('input');

    choiceSelection.setAttribute('type', 'radio');
    choiceSelection.setAttribute('name', 'choice');

    document.getElementById('answersBox').innerHTML = choiceSelection;
    }
}

这是我的 HTML：

<body>
    <form>
        <label id="question">Question:</label><br />
        <div id="answersBox">
        </div>
        <input type="button" value="save" />
    </form>
  <script src="scripts.js"></script>
</body>

问题是，单选按钮没有显示在 answersBox div 中。

score 5 · Accepted Answer

本质上，您需要将您创建的每个元素附加到 DOM 中的正确节点，而不是设置其 HTML 值（这是行不通的，因为choiceSelection 是一个 DOM 元素，而不是表示其 HTML 代码的字符串）

简而言之，改变

document.getElementById('answersBox').innerHTML = choiceSelection;

到

document.getElementById('answersBox').appendChild(choiceSelection);

我已经实现了label在单选按钮旁边添加 HTML 元素。

这是一个有效的jsfiddle 示例

我还想让您注意，for (choices in allQuestions[0])它在 for 循环中创建了一个名为“choices”的内部变量，它遍历 allQuestions[0] 的属性，在本例中它们是“question”、“choices”和“correctAnswer”。

我认为您打算做的是遍历“选择”数组，可以这样做： for (choice in question.choices)- 然后在 for 循环的每一步中，选择都填充有数组索引。

然后，您可以从循环内部访问选择文本，如下所示： question.choices[choice]

score 2 · Accepted Answer

将单选按钮附加到循环中的documentFragment 。for在循环之后将片段（包含所有选项）附加到document自身。

var frag = document.createDocumentFragment();

for (choices in allQuestions[0]) {

    var choiceSelection = document.createElement('input');
    choiceSelection.setAttribute('type', 'radio');
    choiceSelection.setAttribute('name', 'choice');

    frag.appendChild(choiceSelection);
}

document.getElementById('answersBox').appendChild(frag);

例子