Question

我有一个标准的HTML文档，正文中有div标记：

<div id="choicebox"></div>

我有一些JavaScript，旨在使用单选按钮列表填充此div标记（还有一些代码可以动态插入问题，但我省略了它）：

var questions = [{question:"is the sky blue?",choices:["yes","no","maybe","whatevs"]},{question:"is water wet?",choices:["yes","no","maybe","whatevs"]}];
var questionNumber = 0;
function setChoices(questionNumber){
    var i;
    for(i=0;i<questions[questionNumber].choices.length;i++){
        var choiceBox = document.getElementById("choicebox");
        var choiceElement = document.createElement("input");
        choiceElement.setAttribute("type","radio");
        choiceElement.setAttribute("name","choice");
        choiceElement.setAttribute("id","answ" + (i + 1));
        choiceElement.setAttribute("value",i);
        var labelElement = document.createElement("label");
        labelElement.setAttribute("for","choice");
        labelElement.setAttribute("id","choice_" + (i + 1));
        labelElement.innerHTML = questions[questionNumber].choices[i] + "<br />";
        choiceBox.appendChild(choiceElement);
        choiceBox.appendChild(labelElement);
    }
}

我需要的是另一个与next按钮关联的功能，它将放在choicebox div下面。单击时，显示的问题和选项将替换为questions数组中的第二个问题和选项集。类似的东西：

function nextQuestion(){
    var removeQuestion = document.getElementById("question");
    removeQuestion.parentNode.removeChild(removeQuestion);
    var removeChoices = document.getElementById("choicebox");
    choicebox.parentNode.removeChild(choicebox);
    questionNumber++;
    setChoices();
}

对此有任何帮助表示赞赏。如果问题不明确，也请告诉我。我省略了很多代码，使其更简洁。我也试图用vanilla JavaScript编写代码，但也对使用jQuery的任何解决方案感兴趣。

由于

Answer 1

我认为这是一个范围问题，你的函数（setChoice）参数（questionNumber）与函数上面定义的变量相同，所以改变全局变量questionNumber不会影响函数，因为它总会使用参数变量（希望这样做）。尝试用以下代码替换setChoice函数：

function setChoices(newQuestionNumber){
if (newQuestionNumber == 'undefined') {
    newQuestionNumber = questionNumber;
}
else {
    //optional, this wil keep the next button working after going to a random question number
    questionNumber = newQuestionNumber;
}
//optional, check if the question exists
if (typeof questions[newQuestionNumber] == 'undefined') {
    throw 'Question '+newQuestionNumber+' does not exist';
}
var i;
for(i=0;i<questions[newQuestionNumber].choices.length;i++){
    var choiceBox = document.getElementById("choicebox");
    var choiceElement = document.createElement("input");
    choiceElement.setAttribute("type","radio");
    choiceElement.setAttribute("name","choice");
    choiceElement.setAttribute("id","answ" + (i + 1));
    choiceElement.setAttribute("value",i);
    var labelElement = document.createElement("label");
    labelElement.setAttribute("for","choice");
    labelElement.setAttribute("id","choice_" + (i + 1));
    labelElement.innerHTML = questions[newQuestionNumber].choices[i] + "<br />";
    choiceBox.appendChild(choiceElement);
    choiceBox.appendChild(labelElement);
}
}`

修改你确定你在nextQuestion函数中使用了正确的变量吗？

var removeChoices = document.getElementById("choicebox"); removeChoices.parentNode.removeChild(removeChoices);

而不是

var removeChoices = document.getElementById("choicebox"); choicebox.parentNode.removeChild(choicebox);

Answer 2

你说你也会对使用jQuery的任何解决方案感兴趣，所以这里你就是一个：

function next(){
  $('#choicebox').html(''); //clear choiceElement and labelElement.
  questionNumber++; //increment the question number to make the next question the selected element to work with.
  setChoices(questionNumber); //executes your function to include the question on the html.
}

使用JavaScript动态创建和删除单选按钮列表

2 个答案: