Javascript 为我的测验创建上一个按钮

Question

I'm creating a quiz like form and it's almost finished. There is just one thing that I can't seem to figure out. I've got a next, previous and result button but I can't seem to make the previous button work.

    function PrevQuestion() {
        let oldAnswerButton = document.querySelectorAll('.filter_anwser');

        // Deletes old question when the next question is clicked
        for (let answerButton of oldAnswerButton) {
            answerButton.style.display = 'none';
        }

        let question = Quiz[questionNumber];

        // Displays answers of the questions
        for (let y = question.chosenAnswer.length; y > 0; y--) {
            let item = question.chosenAnswer[0];
            // Display answer buttons
            let btn = document.createElement('button');
            btn.value = item.id;
            btn.className = "filter_anwser";
            btn.textContent = item.name;
            button.appendChild(btn);
        }

        // Displays Question
        questionName.textContent = question.questionDescription;
        questionName.id = "questionID";

        // Deletes 1 to see the previous question
        questionNumber--;

    }

The code you see here is the function that belongs to the next button linked with an onclick. Now i've tried to edit this so it does the exact opposite and show me the previous questions and answer buttons but it doesn't work. The function should look a little like this but I just can't figure it out. Can anybody help me?

Full code:

<link rel="stylesheet" href="./style.css">
<div class="container">
    <div id="question"></div>
    <div id="answer"></div>
    <button onclick="NextQuestion()" id="nextbtn">Next</button>
    <button onclick="PrevQuestion()" id="prevbtn">Previous</button>
    <div id="finalLink"></div>
</div>
<script type="text/javascript">

    class QuizPart{
        constructor(questionDescription, chosenAnswer, prefix){
            this.questionDescription = questionDescription;
            this.chosenAnswer = chosenAnswer;
            this.prefix = prefix;
        }
    }
    
    class ChosenAnswer{
        constructor(id, name){
            this.id = id;
            this.name = name;
        }
    }

    let Quiz = [
        new QuizPart('Whats your size?', [
            new ChosenAnswer('6595', '41'),
            new ChosenAnswer('6598', '42'),
            new ChosenAnswer('6601', '43'),
        ], 'bd_shoe_size_ids='),

        new QuizPart('What color would you like?', [
            new ChosenAnswer('6053', 'Red'),
            new ChosenAnswer('6044', 'Blue'),
            new ChosenAnswer('6056', 'Yellow'),
            new ChosenAnswer('6048', 'Green'),
        ], 'color_ids='),

        new QuizPart('What brand would you like?', [
            new ChosenAnswer('5805', 'Adidas'),
            new ChosenAnswer('5866', 'Nike'),
            new ChosenAnswer('5875', 'Puma'),
        ], 'manufacturer_ids=')
    ]
    // console.log(Quiz);
    console.log(Quiz.length);

    let url = [];

    let questionNumber = 0;
    let button = document.getElementById('answer');
    let questionName = document.getElementById('question');
    let nextbtn = document.getElementById('nextbtn');
    let resultbtn = document.getElementById('FLink')

function NextQuestion() {
        let oldAnswerButton = document.querySelectorAll('.filter_anwser');

        // Deletes old question when the next question is clicked
        for (let answerButton of oldAnswerButton) {
            answerButton.style.display = 'none';
        }

        let question = Quiz[questionNumber];

        // Displays answers of the questions
        for (let y = 0; y < question.chosenAnswer.length; y++) {
            let item = question.chosenAnswer[y];
            // Display answer buttons
            let btn = document.createElement('button');
            btn.value = item.id;
            btn.className = "filter_anwser";
            btn.textContent = item.name;
            button.appendChild(btn);
        }
        // Check if your at the last question so the next button will stop being displayed.
        if(Quiz.length - 1 === questionNumber){
            nextbtn.style.display = 'none';
            resultbtn.style.display = 'grid';
        }

        // Displays Question
        questionName.textContent = question.questionDescription;
        questionName.id = "questionID";

        // adds 1 to question to see a different question
        questionNumber++;
}

    function PrevQuestion() {
        let oldAnswerButton = document.querySelectorAll('.filter_anwser');

        // Deletes old question when the next question is clicked
        for (let answerButton of oldAnswerButton) {
            answerButton.style.display = 'none';
        }

        let question = Quiz[questionNumber];

        // Displays answers of the questions
        for (let y = question.chosenAnswer.length; y > 0; y--) {
            let item = question.chosenAnswer[0];
            // Display answer buttons
            let btn = document.createElement('button');
            btn.value = item.id;
            btn.className = "filter_anwser";
            btn.textContent = item.name;
            button.appendChild(btn);
        }

        // Displays Question
        questionName.textContent = question.questionDescription;
        questionName.id = "questionID";

        // Deletes 1 to see the previous question
        questionNumber--;

    }

</script>

Answer 1

When you write a for loop, there are 3 parts within the brackets. The first part declares a variable which is scoped to the loop. The second part is the condition for when the loop should finish. The third part is how the variable should change after each time round the loop.

You can see this working perfectly in NextQuestion :

for (let y = 0; y < question.chosenAnswer.length; y++) {... }

The first part declares a variable called y and sets its value to zero. Each time round the loop, the third part runs, so y becomes 1 , then 2 , and so on. Each time, the second part is checked to see if the loop should continue. If y is still smaller than the length of question.chosenAnswer then the loop will run again, but at some point y becomes equal to question.chosenAnswer.length and the loop stops. The key point is that y isn't getting bigger automatically, it's getting bigger because that's what we've specified in the third part of the loop.

Now let's have a look at your loop in PrevQuestion :

for (let y = 0; y > question.chosenAnswer.length; y--) {... }

Again y starts at zero, but this time we are decreasing it's value each time (using y-- ) so it's value becomes -1 then -2 and so on. y keeps getting smaller so it never ends up larger than question.chosenAnswer.length , which is what would stop the loop. The consequence of this is that your loop will run infinitely, and the code after the loop will never execute.

It's hard to know for sure without seeing the full code, but most likely you want y++ same as in NextQuestion . An alternative would be to keep y-- but change the variable's initial variable and the end condition. For example, this would be fine:

for (let y = question.chosenAnswer.length; y > 0; y--) {... }

Which is best in your case simply depends on which order you want y to take the values from 0 to question.chosenAnswer.length - if it should go from smallest to largest, or the other way round.