Javascript為我的測驗創建一個上一個按鈕-有解無憂

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

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

    }

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

完整代碼：

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

uj5u.com熱心網友回復：

撰寫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--）所以它的值變成-1then-2等等。y不斷變小，所以它永遠不會大于question.chosenAnswer.length，這就是停止回圈的原因。這樣做的結果是您的回圈將無限運行，回圈之后的代碼將永遠不會執行。

如果沒有看到完整的代碼，很難確定，但很可能你想要y 與NextQuestion. 另一種方法是保留y--但更改變數的初始變數和結束條件。例如，這很好：

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

這是最好的，你的情況只是取決于你想要的順序y從取值0到question.chosenAnswer.length-如果它應該從最小到最大，或者反過來。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/383751.html

標籤：javascript 功能按钮

上一篇：在returnType中獲取與傳遞給函式的引數一樣多的嵌套記錄

下一篇：JS重定向功能