如何创建下一个和上一个按钮以使用数组存储作为对象的问题在测验中选择问题？

Question

 //Constructor for all of the questions //A function to check if the question is correct class Question { constructor(question, ansA, ansB, ansC, ansD, answer) { this.question = question; this.ansA = ansA; this.ansB = ansB; this.ansC = ansC; this.ansD = ansD; this.answer = answer; } checkAns(ansSelected, answer){ if(ansSelected === answer){ console.log('Well Done') } } }; //The questions themselves var questionOne = new Question('Where is Creete?', 'Barcalona', 'Greece', 'Dubi', 'Ireland', 'Greece'); var questionTwo = new Question('How many times have Liverppool won the Champions Legue?', '1', '4', '6', '5', '6',); //Array to store the questions const arrayQuestion = [questionOne, questionTwo]; const i = 0; //Displaying the questions in HTML document.getElementById('question').innerHTML += arrayQuestion[i].question; document.getElementById('A').innerHTML += arrayQuestion[i].ansA; document.getElementById('B').innerHTML += arrayQuestion[i].ansB; document.getElementById('C').innerHTML += arrayQuestion[i].ansC; document.getElementById('D').innerHTML += arrayQuestion[i].ansD;

 html { box-sizing: border-box; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; } button{ background: blue; padding: 1.2em; margin: 1.2em; }

 <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title></title> </head> <body> <form> <h2 id="question"></h2> <button id="A" class="userSelection"></button> <button id="B" class="userSelection"></button> <button id="C" class="userSelection"></button> <button id="D" class="userSelection"></button> <button id="p" class="userSelection">P</button> <button id="n" class="userSelection">N</button> </form> </body> <script src = js/app.js></script> </html>

So I am making a quiz and every questions is a separate object made from a constructor.所以我在做一个测验，每个问题都是一个由构造函数创建的单独对象。

The questions are stored in a array.问题存储在一个数组中。

I would like to create a next and previous button, so the user can cycle through the questions dynamically.我想创建一个下一个和上一个按钮，以便用户可以动态地循环浏览问题。

So I have tried using the onClick() I though if I just incremented the i variable it would display the next question.所以我尝试使用 onClick() 我虽然如果我只是增加 i 变量它会显示下一个问题。

n.addEventListener("click", next);

function next (){
    i++;
}

There was no error above the questions did not change/would not appear (This was because I had not declared the variable i yet.上面没有错误，问题没有改变/不会出现（这是因为我还没有声明变量 i 。

The HTML should just switch to display the next question in the Array. HTML 应该只是切换到显示数组中的下一个问题。

Answer 1

so what I think you can do is, in your next and prev method you have to also update html with new values after you increment i so it should looks something like所以我认为你可以做的是，在你的next和prev方法中，你还必须在增加i后用新值更新 html 所以它应该看起来像

function next (){
    i++;
renderHTMLwithNewValues(i);
}

function prev (){
    i--;
renderHTMLwithNewValues(i);
}


function renderHTMLwithNewValues(i){

document.getElementById('question').innerHTML = arrayQuestion[i].question;
document.getElementById('A').innerHTML = arrayQuestion[i].ansA;
document.getElementById('B').innerHTML = arrayQuestion[i].ansB;
document.getElementById('C').innerHTML = arrayQuestion[i].ansC;
document.getElementById('D').innerHTML = arrayQuestion[i].ansD;
}

to make sure new values are rendered each time you click button确保每次单击按钮时都会呈现新值

如何创建下一个和上一个按钮以使用数组存储作为对象的问题在测验中选择问题？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-27 22:58:07

如何创建下一个和上一个按钮以使用数组存储作为对象的问题在测验中选择问题？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-27 22:58:07

解决方案1
1 已采纳 2019-08-27 22:58:07