时间戳

首页 > 解决方案 > 如何创建下一个和上一个按钮以使用数组存储作为对象的问题来选择测验中的问题？

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

问题描述

//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>

所以我正在做一个测验，每个问题都是一个由构造函数组成的单独对象。

问题存储在数组中。

我想创建一个下一个和上一个按钮，以便用户可以动态地循环浏览问题。

所以我尝试使用 onClick() 我虽然如果我只是增加 i 变量它会显示下一个问题。

n.addEventListener("click", next);

function next (){
    i++;
}

上面没有错误，问题没有改变/不会出现（这是因为我还没有声明变量 i.

HTML 应该只是切换以显示数组中的下一个问题。

标签： javascripthtml

解决方案

所以我认为你可以做的是，在你的nextandprev方法中，你还必须在递增后用新值更新 html，i所以它应该看起来像

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;
}

确保每次单击按钮时都会呈现新值

推荐阅读