Question

尝试进行测验，用户将在此时显示一个问题。然后当他们回答并点击“下一个问题”时，会显示下一个问题。

我试图创建一个函数，其中onclick将迭代到下一个indexValue。我尝试使用if（）{} else函数使每个indexValue等于0,1,2,3等等。计划是“if（indexValue === 0）”然后它会停止，直到你点击“下一个问题”按钮。我没有那个工作。有谁知道如何在每个问题上使for循环停止，然后当用户点击“下一个问题”按钮时，for循环转到下一个问题？

现在，当你点击“下一个问题”按钮时，for循环只会遍历问题和答案，并在最后一个句点停止。

代码在：

HTML CODE：

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <link href="https://fonts.googleapis.com/css?family=Varela+Round" 
   rel="stylesheet">

</head>
<body>

   <div id="quizField">

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

    <button type="button" id="answerOne"></button>

    <button type="button" id="answerTwo"></button>

    <button type="button" id="answerThree"></button>

    <br>

    <button type="button" onclick="buttonFunction()">Next 
     question</button>

 </div>    
<script src="app.js"></script>
</body>
</html>

JS CODE：

var questionArr = [
{
question: "How many states in USA?",
answerOne: "50",
answerTwo: "48",
answerThree: "52"
},
{
question: "Where is Norway?",
answerOne: "America",
answerTwo: "Europ",
answerThree: "Asia"
}
];

function buttonFunction(){
    for(var i = 0; i < questionArr.length; i += 1){

    function getQuestion(){
        var questionInner = document.getElementById("question");
        return questionInner.innerHTML = questionArr[i].question;
    }
    getQuestion();

    function getAnswerOne(){
        var answerOneInner = document.getElementById("answerOne");
        return answerOneInner.innerHTML = questionArr[i].answerOne;
    }
    getAnswerOne();


    function getAnswerTwo(){
        var answerTwoInner = document.getElementById("answerTwo");
        return answerTwoInner.innerHTML = questionArr[i].answerTwo;
    }
    getAnswerTwo();

    function getAnswerThree(){
        var answerThreeInner = document.getElementById("answerThree");
        return answerThreeInner.innerHTML = questionArr[i].answerThree;
    }
    getAnswerThree();
  }
}

CSS代码：

body{
width: 100%;
margin: auto;
font-family: serif;
font-family: 'Varela Round', sans-serif;
}

#quizField{
margin: auto;
width: 100%;
text-align: center;
}

#question{
font-size: 24px;
font-weight: 900;
margin: 20px;
}

#answerOne{
font-size: 16px;
font-weight: 500;
}

#answerTwo{
font-size: 16px;
font-weight: 500;
}

#answerThree{
font-size: 16px;
font-weight: 500;
}

button{
padding: 8px 15px;
color: white;
background-color: forestgreen;
border-radius: 5px;
border: 0px;
margin: 10px;
}

button:hover{
   background-color: limegreen;
}

Answer 1

为此，您可以从Iterator中受益。只需在每次点击时拨打next()即可。

快速演示：

const array = ['question one', 'question two', 'question three'];

const it = array[Symbol.iterator]();

const el = document.getElementById('question');

document.getElementById('next').onclick = function() {
  let next = it.next(); // get the next element
  (next.done) ? 
  	[el.innerText, this.innerText, this.disabled] = ['Complete!', 'Done', true]
  	: el.innerText = next.value;
}

<div id="question">Ready?</div>

<button id="next">Next</button>

Answer 2

这是一个fiddle来帮助您移动。

在开头声明全局变量，存储当前问题的索引。（可选）您可以将其存储为DOM元素的data属性。

window.nextQuestionIndex = 0;

单击按钮，然后将此索引传递给一个函数，该函数根据此索引获取元素。然后将索引增加1以用于下一个问题。那时你不需要使用for循环。

nextQuestion(window.nextQuestionIndex);
window.nextQuestionIndex++;

迭代一个数组，一个当时进行测验

2 个答案: