Javascript 我如何迭代一系列问题和答案

我正在用javascript创建一个测验；目前，我有一个前进和后退按钮，它在我的\0中循环/

此外，我还成功地创建了一些单选按钮，并能够提取第一组答案。 我的问题是，我无法遍历其余的答案（在数组中）以匹配这些问题

这是html：

    <div class="container">
    <div class="sixteen columns">
        <div class="row"></div>
        <h1>
            Welcome to the <br>ultimate nerd quiz!
        </h1>
        <form id="f1" method="post">

            <div id="question"></div>
        </form>
        <button class='navBackward'><</button><button class='navForward'>></button>     
    </div>
    <!-- sixteen columns -->
</div>
<!-- container -->

这是我的JS:（这是创建初始单选按钮和第一组答案的原因）

function createRadioButtonFromArray(array) { 
    var len = array.length;
    var form = document.getElementById("f1");
    for (var i = 0; i < len; i++) {
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices";
    radio.className = "radioButtons";
    radio.value = i;
    radio.id = "choice" + i;
    var radioText = document.createElement("div");
    radioText.id = "c" + i;
    radioText.className = "choiceText";
    radioText.innerHTML = array[i];

    form.appendChild(radio);
    form.appendChild(radioText);

    }
}

createRadioButtonFromArray(item.choices);

函数createRadioButtonFromArray（数组）{
var len=array.length；
var form=document.getElementById（“f1”）；
对于（变量i=0；i

这就是我试图用来显示数组中其他选项/答案的内容

function answerFwd(){
    var answerOutput = " ";
    var itemAnswers = allQuestions;

    if(currentAnswer <= itemAnswers.length){
    currentAnswer++;
    }

函数answerFwd（）{
var answerOutput=“”；
var itemAnswers=所有问题；
如果（当前）回答
我想问题是我没有正确地输出数组
内容

是的。你的内容是一个数组，所以你需要迭代它

var answerOutput = "<p>" + itemAnswers[currentQuestion].choices[0] + "</p> <br/>";

var answerOutput=“”+项目答案[currentQuestion]。选项[0]+“

”；

我想你应该这样做：

HTML:（->添加一个responses的div，如问题的div）


欢迎参加终极书呆子测验！

JS:

函数createRadioButtonFromArray（数组）{
var len=array.length；
var responses=document.getElementById（“responses”）；//请参考我的答案，并调整演示并使其适合您的html
    var answerOutput = "<p>" + itemAnswers[currentQuestion].choices + "</p> <br/>";
    update = document.getElementById("f1");

    update.innerHTML = answerOutput;

}

var answerOutput = "<p>" + itemAnswers[currentQuestion].choices[0] + "</p> <br/>";

<div class="container">
    <div class="sixteen columns">
        <div class="row"></div>
         <h1>
                Welcome to the <br>ultimate nerd quiz!
            </h1>

        <form id="f1" method="post">
            <div id="question"></div>
            <div id="responses"></div>
        </form>
        <button class='navBackward'>
            <</button>
                <button class='navForward'>></button>
    </div>
    <!-- sixteen columns -->
</div>

function createRadioButtonFromArray(array) {
    var len = array.length;
    var responses = document.getElementById("responses"); // <- reach the responses div instead of the form
    responses.innerHTML = '';
    for (var i = 0; i < len; i++) {
        var radio = document.createElement("input");
        radio.type = "radio";
        radio.name = "choices";
        radio.className = "radioButtons";
        radio.value = i;
        radio.id = "choice" + i;
        var radioText = document.createElement("div");
        radioText.id = "c" + i;
        radioText.className = "choiceText";
        radioText.innerHTML = array[i];


        responses.appendChild(radio);
        responses.appendChild(radioText);
    }
}

// ...

function answerFwd() {
    var answerOutput = " ";
    var itemAnswers = allQuestions;

    if (currentAnswer <= itemAnswers.length) {
        currentAnswer++;
    }

    createRadioButtonFromArray(itemAnswers[currentQuestion].choices); // <- Why don't you use the function you created earlier ????

    /*
    var answerOutput = "<p>" + itemAnswers[currentQuestion].choices + "</p> <br/>";
     update = document.getElementById("f1");

    update.innerHTML = answerOutput;
    */
}