Javascript 為我的測驗創建上一個按鈕

Question

我正在創建一個類似表格的測驗，它幾乎完成了。 只有一件事我似乎無法弄清楚。 我有一個下一個、上一個和結果按鈕，但我似乎無法使上一個按鈕工作。

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

    }

您在此處看到的代碼是 function，它屬於與 onclick 鏈接的下一個按鈕。 現在我嘗試編輯它，讓它完全相反，並向我顯示以前的問題和答案按鈕，但它不起作用。 function 應該看起來有點像這樣，但我就是想不通。 有誰能夠幫我？

完整代碼：

<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

當您編寫一個for循環時，括號內有 3 個部分。 第一部分聲明了一個作用域為循環的變量。 第二部分是循環何時結束的條件。 第三部分是在每次循環后變量應該如何變化。

您可以在NextQuestion中看到它完美運行：

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

第一部分聲明一個名為y的變量並將其值設置為零。 每次循環，第三部分都會運行，因此y變為1 ，然后變為2 ，依此類推。 每次，都會檢查第二部分以查看循環是否應該繼續。 如果y仍然小於question.chosenAnswer的長度，則循環將再次運行，但在某個點y變得等於question.chosenAnswer.length並且循環停止。 關鍵是y不會自動變大，它會變大，因為這是我們在循環的第三部分中指定的。

現在讓我們看看PrevQuestion中的循環：

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

y再次從零開始，但這次我們每次都減少它的值（使用y-- ），所以它的值變為-1然后-2等等。 y不斷變小，因此它永遠不會大於question.chosenAnswer.length ，這將停止循環。 這樣做的結果是您的循環將無限運行，並且循環之后的代碼將永遠不會執行。

如果沒有看到完整的代碼，很難確定，但很可能您希望y++與NextQuestion中的相同。 另一種方法是保留y--但更改變量的初始變量和結束條件。 例如，這會很好：

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

在您的情況下哪個最好取決於您希望y將值從0到question.chosenAnswer.length的順序 - 如果它應該 go 從最小到最大，或者相反。