循环卡在第一个间隔

Question

我意识到你们中的一些人会在一秒钟内发现这一点，但由于某种原因，当使用 onclick 命令点击按钮时，我无法让循​​环比初始循环循环更多。

//creat array with my questions
var qArray = [
  'What is the answer to the sum 1 + 1?',
  'If I have two eggs and I drop one how many do I have left?',
  'What are the three primary     colors?'
];

//create variables
var counter = 0;
var theQuestions = document.getElementById('theQuestions');

//loop through array
function questFunc() {
    for (var i = 0; i < qArray.length; i++) {
        theQuestions.innerHTML = qArray[i];
        counter++;
    }
};

任何帮助将不胜感激。我环顾四周但找不到它，我确定这是因为它是如此明显的修复/愚蠢错误：D

谢谢你..

Answer 1

如果您想在每次单击按钮时显示一个新问题。您可以尝试以下方法：

//creat array with my questions
var qArray = ['What is the answer to the sum 1 + 1?', 'If I have two eggs and I drop one how many do I have left?', 'What are the three primary     colors?'];

//create variables
var counter = 0;
var theQuestions = document.getElementById('theQuestions');

//loop through array
function questFunc() {
    if (counter < qArray.length) {
        theQuestions.innerHTML = qArray[counter];
        counter++;
    }
};

Answer 2

for 循环按预期工作，第一个问题在这一行：theQuestions.innerHTML = qArray[i];。每次更改innerHTML时，它并没有再添加一项，它只是用新的值覆盖了以前的值，所以你可以尝试使用append()来代替。第二个问题是在您的情况下使用 for 循环，这样您只需单击一个按钮即可遍历整个数组。您已经有 counter 变量来存储将在单击下一个按钮后使用的数组索引。可能不是很好的解释，但请随时提出更多问题。

还有一个sn-p：

//creat array with my questions
var qArray = ['What is the answer to the sum 1 + 1?', 'If I have two eggs and I drop one how many do I have left?', 'What are the three primary     colors?'];

//create variables
var counter = 0;
var theQuestions = document.getElementById('theQuestions');

//loop through array
function questFunc() {
    if (counter < qArray.length) {
      theQuestions.append(qArray[counter]);
      counter ++;
    }
};

<button onclick="questFunc()">Click</button>
<div id="theQuestions"></div>

下面是它与innerHTML 的工作方式：

//creat array with my questions
var qArray = ['What is the answer to the sum 1 + 1?', 'If I have two eggs and I drop one how many do I have left?', 'What are the three primary     colors?'];

//create variables
var counter = 0;
var theQuestions = document.getElementById('theQuestions');

//loop through array
function questFunc() {
    if (counter < qArray.length) {
      theQuestions.innerHTML = qArray[counter];
      counter ++;
    }
};

<button onclick="questFunc()">Click</button>
<div id="theQuestions"></div>