Question

我似乎无法从我的阵列中一次添加多个选项。我想用相应的单选按钮一次性添加它们。最好的方法是什么？下面是代码。

Answer 1

问题在于你的for循环条件检查。把这个

for (var i = 0; i < quizContent[0].choices.length; i++)

你需要在quizcontent对象中获取选择数组的长度。

Answer 2

您需要枚举您的选择并为每个答案添加标签（jsFiddle）：

for (var i = 0; i < quizContent.length; i++) {
  document.getElementById("questionHeader").innerHTML = quizContent[i].question;

  for (var j = 0; j < quizContent[i].choices.length; j++) {
    var choice = quizContent[i].choices[j];
    var id = "ans" + j + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + j + 1);
    elem.setAttribute("name", "ans" + i);
    document.getElementById("choices").appendChild(elem);
    var labelElem = document.createElement("label");
    labelElem.innerHTML = quizContent[i].choices[j];
    document.getElementById("choices").insertBefore(labelElem, elem);
  }

}

Answer 3

您的代码存在一些问题。第一个进入for循环的条件。您应该多次运行它，因为有选择。其次，您必须为每个选项添加标签，但您只是为第一个选择添加标签。

for (var i = 0; i < quizContent[0].choices.length; i++) {
    var choice = quizContent[0].choices[i];
    var id = "ans" + i + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + i + 1);
    elem.setAttribute("name", "answer");
    var label = document.createElement("label");
    label.setAttribute("class", "choice");
    label.innerHTML = choice;
    var br = document.createElement('br');

    document.getElementById("choices").appendChild(label);
    document.getElementById("choices").appendChild(elem);
    document.getElementById("choices").appendChild(br);
}

Answer 4

你正在循环错误，为所有选项创建单选按钮。

目前，变量i正在从0循环到quizContent.length。这意味着它正在循环遍历所有问题。这可以很好地创建多个问题，但它不能创建多个答案。

要做到这一点，在循环遍历问题的循环中，您还必须遍历答案选项。目前，你有这个：

for (var i = 0; i < quizContent.length; i++) {
    var choice = quizContent[0].choices[i];
    var id = "ans" + i + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + i + 1);
    document.getElementById("choices").appendChild(elem);
    document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

而你应该循环通过答案选择：

for (var i = 0; i < quizContent.length; i++) {
    for (var x = 0; x < quizContent[i].choices.length; x++) {
        var choice = quizContent[i].choices[x];
        var id = "ans" + i + 1;
        var elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("id", "ans" + i + 1);
        document.getElementById("choices").appendChild(elem);
        document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

Answer 5

请在下面自我解释，

<div id="container">
  <h1 id="title">Your Quiz</h1>
  <h2 id="questionHeader"></h2>
  <div id="choices"></div>
</div>

for (var i = 0; i < quizContent.length; i++) {
    for (var j = 0; j < quizContent[i].choices.length; j++) { // choices is an array so iterate over it to get individual choice.
        var choice = quizContent[i].choices[j]; 
        var id = "ans" + i + 1;
        var elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("id", "ans" + i + 1);
        elem.setAttribute("name", "choice"); // set this to ensure only one radio button is selected.
        document.getElementById("choices").appendChild(elem);
        var label = document.createElement("label");
        label.innerHTML = quizContent[0].choices[j]; // set label innerHTML here 
        document.getElementById("choices").appendChild(label); // append label here
    }
}

Working fiddle

Answer 6

塑造你的循环以稍微添加标记的单选按钮，它将为所有选择添加标记的单选按钮：

//Need to loop through my choices and create radio buttons at same time.
//Having trouble creating radio buttons here.

for (var i = 0; i < quizContent[0].choices.length; i++) {
    var choice = quizContent[0].choices[i];

    var labelId = "lbl" + i + 1;
    var labelElem = document.createElement("label");
    labelElem.setAttribute("id", labelId);
    document.getElementById("choices").appendChild(labelElem);
    document.getElementById(labelId).innerHTML = quizContent[0].choices[i];

    var inputId = "ans" + i + 1;
    var inputElem = document.createElement("input");
    inputElem.setAttribute("type", "radio");
    inputElem.setAttribute("id", inputId);
    document.getElementById("choices").appendChild(inputElem);
    //document.getElementById(id).innerHTML = choice;

    /*radioButton = document.createElement("input");
    radioButton.type = "radio";*/

    //document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

这只是对你需要走的方向的极简主义解释。

@Pilot有这个想法。

填写选择多项选择测验

6 个答案:

Working fiddle