Question

Javascript 多项选择题不循环

2021-08-26

106

javascript loops

在开始之前，这是我第一次使用 Stack Overflow 寻求帮助，因此如果我做错了，我深表歉意，并非常乐意接受反馈。这里的社区很棒 :)

所以，我的问题是我正在创建一个多项选择测验。我的代码是：

let questionList = [{
    question: "What is your name?",
    choices: ["bill", "bob", "steve", "joe"],
    correctAnswer: "bill",
},
{
    question: "What is her name?",
    choices: ["dan", "danny", "danielle", "daniela"],
    correctAnswer: "daniela"
},
{
    question: "What is mum's name?",
    choices: ["doris", "jane", "rose", "frank"],
    correctAnswer: "rose"
},
{
    question: "What is dad's name?",
    choices: ["ian", "angus", "jack", "john"],
    correctAnswer: "ian"
},
]

function callQuestions() {
    for (let i = 0; i < questionList.length; i++) {
        document.getElementById("quiz-questions").innerHTML = questionList[i].question;
        document.getElementById("answerA").innerHTML = questionList[i].choices[0];
        document.getElementById("answerB").innerHTML = questionList[i].choices[1];
        document.getElementById("answerC").innerHTML = questionList[i].choices[2];
        document.getElementById("answerD").innerHTML = questionList[i].choices[3];
    }
}

document.getElementById("select-button").addEventListener("click", callQuestions);

在我的 HTML 中，最后一个问题出现了。我有一个按钮，当我单击它时应该调用此函数，但它没有递增 - 它会重置测验并显示相同的问题。

所以我的问题是：

有人能告诉我为什么出现最后一个问题而不是第一个问题吗？和有人能告诉我为什么它没有循环吗？

非常感谢！

Answer 1

您将必须保存当前问题编号的状态，并在用户调用上相应地将其汇总。

867383984

Utkarsh Dixit

2021-08-26

Answer 2

您正在循环遍历数组，循环结束后它将始终设置最后一个 questionList 元素。您必须从 0 开始，直到完成数组，但只有当用户单击 Next 按钮时才可以这样做

您可以在最后一个问题之后使用

current = current % questionList.length;

let questionList = [{
    question: "What is your name?",
    choices: ["bill", "bob", "steve", "joe"],
    correctAnswer: "bill",
  },
  {
    question: "What is her name?",
    choices: ["dan", "danny", "danielle", "daniela"],
    correctAnswer: "daniela"
  },
  {
    question: "What is mum's name?",
    choices: ["doris", "jane", "rose", "frank"],
    correctAnswer: "rose"
  },
  {
    question: "What is dad's name?",
    choices: ["ian", "angus", "jack", "john"],
    correctAnswer: "ian"
  },
]

let current = 0;

function callQuestions() {
  document.getElementById("quiz-questions").innerHTML = questionList[current].question;
  document.getElementById("answerA").innerHTML = questionList[current].choices[0];
  document.getElementById("answerB").innerHTML = questionList[current].choices[1];
  document.getElementById("answerC").innerHTML = questionList[current].choices[2];
  document.getElementById("answerD").innerHTML = questionList[current].choices[3];
  current++;
  current = current % questionList.length;
}
document.getElementById("select-button").addEventListener("click", callQuestions);
callQuestions();

#quiz-questions {
  padding: 1rem;
}

#select-button {
  background-color: bisque;
  padding: .5rem .75rem;
  border: none;
  margin-top: 2rem;
  border-radius: 4px;
  cursor: pointer;
}

.button-wrapper{
  display: flex;
  justify-content: center;
}

<div id="quiz-questions"></div>

<ol>
  <li id="answerA"></li>
  <li id="answerB"></li>
  <li id="answerC"></li>
  <li id="answerD"></li>
</ol>

<div class="button-wrapper">
<button id="select-button">next</button>
</div>

再次循环

Answer 3

document.getElementById("select-button").addEventListener("click", callQuestions);

从这一行开始，当您单击按钮时，将调用 callQuestions 。它具有局部变量循环。现在它循环遍历所有问题最后 i 变为 5 document.getElementById("quiz-questions").innerHTML = questionList[i].question; 所以只显示最后一个问题

it's resetting the quiz

这是因为 i 是局部的，其值与您的单击无关。单击按钮时，它的值将从 0 变为 5

why it's not looping?

它在 callQuestions 函数内循环，因为它很快，所以您看不到它。