Question

我创建了一个测验应用程序，幸运的是我遇到了一些问题，但是我很好奇。所以问题是我有一个包含问题和答案的数组。我想遍历数组并在单击下一步按钮时显示下一个问题。问题是，当我单击下一步按钮时，只显示了最后一个问题，什么也没发生

这是示例代码

const questions = [

{
question: "What is 2 + 2?",
answers: [3,4,5,6]
},
{
question: "What is 6 + 2?",
answers: [9,8,5,6]

},
{
question: "What is 10 + 30?",
answers: [32,45,40,34]

}

]

const p = document.getElementById("qtn");
document.getElementById("next").addEventListener("click",()=> {

for (let i=0; i<questions.length;i++){

p.textContent = questions[i].question;
}

});

但是当我删除for循环时，它起作用了

const i=0;
const p = document.getElementById("qtn");
document.getElementById("next").addEventListener("click",()=> {



p.textContent = questions[i].question;
i++

});

那么为什么第二个解决方案有效，而第一个解决方案无效

Answer 1

实际上，在您的第一个解决方案中，显示的唯一答案是最后一个答案。

发生这种情况的原因是因为for循环的结果始终相同。它没有任何目的。

每次按下时，for循环将从i = 0一直运行到questions.length。这意味着它一直运行到循环结束，在循环的每次迭代中都非常快速地更改p.textContent的值。因此，您将看到的唯一结果是最后一条消息（循环结束后）。

删除循环后，您的代码在每次单击后便会递增，因此显示了所需的结果。同样，对于计数器，我将使用let i= 0;而不是const。

希望它为您澄清了一切。

Answer 2

如果值不是数组或对象，则无法将其更新为const，请改用var或let。

const questions = [
{
question: "What is 2 + 2?",
answes: [3,4,5,6]
},
{
question: "What is 6 + 2?",
answes: [9,8,5,6]

},
{
question: "What is 10 + 30?",
answes: [32,45,40,34]
}
];

var p = document.getElementById("qtn");
var current=0;
var questionIndex=current+1;

p.innerHTML = '('+ questionIndex +')  '+questions[current].question;

var prevButton=document.getElementById("prev");
var nextButton=document.getElementById("next");

function nextQuestion(){

if(current<questions.length-1){
current++;
questionIndex=current+1;
p.innerHTML = '('+ questionIndex +')  '+questions[current].question;
prevButton.style.display="block";
}

if(current===questions.length-1){
prevButton.style.display="block"
nextButton.style.display = "none";
}

}


function prevQuestion(){
if(current>0){
current--;
questionIndex=questionIndex-1;
p.innerHTML = '('+ questionIndex +')  '+questions[current].question;
nextButton.style.display="block";
}

if(current===0){
prevButton.style.display="none"
nextButton.style.display = "block";
}
}

<p id="qtn"></p>
<button id="prev" style="display:none" onclick="prevQuestion()">Prev</button>
<button id="next" style="display:block" onclick="nextQuestion()">Next</button>

遍历测验应用程序中的对象数组

2 个答案: