使用循环索引数组时出错

时间：2019-02-18 07:07:02

标签： javascript

我正在制作一个简单的测验应用程序，当跳过第一个问题（不是循环问题）时，它会触发循环开始，从而当您回答问题时，它会在问题中建立索引并让您下一个，并附有答案。对于我的问题数组，由于某种原因它不会索引第二个问题，但这在我的答案数组上不是问题。

我已经尝试在两个值之间添加一个空字符串，但没有任何效果，但仍然返回“ undefined”。我也尝试在开始时插入一个空字符串，这没有任何效果。但是我不知何故需要在答案数组的答案集之间插入空字符串。 这是您回答我的问题所需的所有代码，只需询问即可获得更多信息！


var readyButton = document.getElementById("readyButton"); // since people asked for full code
var question = document.getElementById("question");
var answerOne = document.getElementById("answer1");
var answerTwo = document.getElementById("answer2");
var answerThree = document.getElementById("answer3");
var answerFour = document.getElementById("answer4");
var answerOneData = document.getElementById("answer1data");
var answerTwoData = document.getElementById("answer2data");
var answerThreeData = document.getElementById("answer3data");
var answerFourData = document.getElementById("answer4data");
var answerOneDataT = document.getElementById("answer1dataT");
var answerTwoDataT = document.getElementById("answer2dataT");
var answerThreeDataT = document.getElementById("answer3dataT");
var answerFourDataT = document.getElementById("answer4dataT");
var nextAnswers = ["", "24", "25.5", "15", "32","", "a statement", "a question", "a sentence", "a metaphor"];
var nextQuestions = ["Find x in the equation: 2x+12=63", "This is an example of...",];
let possibilities = {
    'clicked1': 0,
    'clicked2': 0,
    'clicked3': 0,
    'clicked4': 0,
};

readyButton.addEventListener("click", function() {
    question.innerHTML = "Let's get started with 2*2";
    question.style.right="800px";
    readyButton.style.display="none";
    answerOne.style.display="block";
    answerTwo.style.display="block";
    answerThree.style.display="block";
    answerFour.style.display="block";
    answerOneDataT.innerHTML="<8";
    answerTwoDataT.innerHTML="1*1";
    answerThreeDataT.innerHTML="-2*4";
    answerFourDataT.innerHTML="1+2";
});

for(let i=0; i<1; i++) {

answerOne.addEventListener("click", function() {
    possibilities['clicked1']++;
    question.innerHTML=(nextQuestions[i++]);
    answerOneDataT.innerHTML=(nextAnswers[i++]);
    answerTwoDataT.innerHTML=(nextAnswers[i++]);
    answerThreeDataT.innerHTML=(nextAnswers[i++]);
    answerFourDataT.innerHTML=(nextAnswers[i++]);
    return;
});

answerTwo.addEventListener("click", function() {
    possibilities['clicked2']++;
    question.innerHTML=(nextQuestions[i++]);
    answerOneDataT.innerHTML=(nextAnswers[i++]);
    answerTwoDataT.innerHTML=(nextAnswers[i++]);
    answerThreeDataT.innerHTML=(nextAnswers[i++]);
    answerFourDataT.innerHTML=(nextAnswers[i++]);
    return;
});

answerThree.addEventListener("click", function() {
    possibilities['clicked3']++;
    question.innerHTML=(nextQuestions[i++]);
    answerOneDataT.innerHTML=(nextAnswers[i++]);
    answerTwoDataT.innerHTML=(nextAnswers[i++]);
    answerThreeDataT.innerHTML=(nextAnswers[i++]);
    answerFourDataT.innerHTML=(nextAnswers[i++]);
    return;
});

answerFour.addEventListener("click", function() {
    possibilities['clicked4']++;
    question.innerHTML=(nextQuestions[i++]);
    answerOneDataT.innerHTML=(nextAnswers[i++]);
    answerTwoDataT.innerHTML=(nextAnswers[i++]);
    answerThreeDataT.innerHTML=(nextAnswers[i++]);
    answerFourDataT.innerHTML=(nextAnswers[i++]);
    return;
});

};

2 个答案:

答案 0 :(得分：0)

我不知道您的HTML结构，我已经放了一个示例HTML。您需要注意或需要进行更改以避免未定义错误的事情是：

  • 在nextAnswers和nextQuestions上添加足够的数据，在显示下一个问题和答案选项之前先检查数组索引是否存在

  • 避免循环。如果要处理点击，则不必一直增加i。

  • 使用另一个变量作为i来处理问题。在这里，我添加了q。 

var readyButton = document.getElementById("readyButton"); // since people asked for full code
var question = document.getElementById("question");
var answerOne = document.getElementById("answer1");
var answerTwo = document.getElementById("answer2");
var answerThree = document.getElementById("answer3");
var answerFour = document.getElementById("answer4");
var answerOneData = document.getElementById("answer1data");
var answerTwoData = document.getElementById("answer2data");
var answerThreeData = document.getElementById("answer3data");
var answerFourData = document.getElementById("answer4data");
var answerOneDataT = document.getElementById("answer1dataT");
var answerTwoDataT = document.getElementById("answer2dataT");
var answerThreeDataT = document.getElementById("answer3dataT");
var answerFourDataT = document.getElementById("answer4dataT");
var nextAnswers = ["", "24", "25.5", "15", "32", "", "a statement", "a question", "a sentence", "a metaphor", "", "24", "25.5", "15", "32", "", "a statement", "a question", "a sentence", "a metaphor", "", "24", "25.5", "15", "32", "", "a statement", "a question", "a sentence", "a metaphor"];
var nextQuestions = ["Find x in the equation: 2x+12=63", "This is an example of...", "Q 4", "Q 5", "Q 6", "Q 7"];
let possibilities = {
  'clicked1': 0,
  'clicked2': 0,
  'clicked3': 0,
  'clicked4': 0,
};

readyButton.addEventListener("click", function() {
  question.innerHTML = "Let's get started with 2*2";
  question.style.right = "800px";
  readyButton.style.display = "none";
  answerOne.style.display = "block";
  answerTwo.style.display = "block";
  answerThree.style.display = "block";
  answerFour.style.display = "block";
  answerOneDataT.innerHTML = "<8";
  answerTwoDataT.innerHTML = "1*1";
  answerThreeDataT.innerHTML = "-2*4";
  answerFourDataT.innerHTML = "1+2";
});

var i = q = 0;

answerOne.addEventListener("click", function() {
  possibilities['clicked1']++;
  question.innerHTML = (nextQuestions[q++]);
  answerOneDataT.innerHTML = (nextAnswers[i++]);
  answerTwoDataT.innerHTML = (nextAnswers[i++]);
  answerThreeDataT.innerHTML = (nextAnswers[i++]);
  answerFourDataT.innerHTML = (nextAnswers[i++]);
  return;
});

answerTwo.addEventListener("click", function() {
  possibilities['clicked2']++;
  question.innerHTML = (nextQuestions[q++]);
  answerOneDataT.innerHTML = (nextAnswers[i++]);
  answerTwoDataT.innerHTML = (nextAnswers[i++]);
  answerThreeDataT.innerHTML = (nextAnswers[i++]);
  answerFourDataT.innerHTML = (nextAnswers[i++]);
  return;
});

answerThree.addEventListener("click", function() {
  possibilities['clicked3']++;
  question.innerHTML = (nextQuestions[q++]);
  answerOneDataT.innerHTML = (nextAnswers[i++]);
  answerTwoDataT.innerHTML = (nextAnswers[i++]);
  answerThreeDataT.innerHTML = (nextAnswers[i++]);
  answerFourDataT.innerHTML = (nextAnswers[i++]);
  return;
});

answerFour.addEventListener("click", function() {
  possibilities['clicked4']++;
  question.innerHTML = (nextQuestions[q++]);
  answerOneDataT.innerHTML = (nextAnswers[i++]);
  answerTwoDataT.innerHTML = (nextAnswers[i++]);
  answerThreeDataT.innerHTML = (nextAnswers[i++]);
  answerFourDataT.innerHTML = (nextAnswers[i++]);
  return;
});
<button id="readyButton">Ready</button>

<div id="question"></div>

<a id="answer1">
  <div id="answer1dataT"></div>
</a>
<a id="answer2">
  <div id="answer2dataT"></div>
</a>
<a id="answer3">
  <div id="answer3dataT"></div>
</a>
<a id="answer4">
  <div id="answer4dataT"></div>
</a>

<div id="answer1data"></div>
<div id="answer2data"></div>
<div id="answer3data"></div>
<div id="answer4data"></div>

答案 1 :(得分：-1)

您的for循环在每次迭代后都会增加索引，这是不必要的，因为您的循环主体已经增加了索引。

相关问题
最新问题