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

Posted 2023-02-19

【中文标题】Javascript 为我的测验创建上一个按钮

【英文标题】：Javascript create a previous button for my quiz

【发布时间】：2022-01-19 09:40:21

【问题描述】：

我正在创建一个类似测验的表格，它快完成了。只有一件事我似乎无法弄清楚。我有下一个、上一个和结果按钮，但我似乎无法使上一个按钮工作。

    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>

【问题讨论】：

如果我理解正确，你已经有一个 previousQuestion 函数在运行，它只是不能正常运行。如果这是正确的，请您包含previousQuestion（或其他名称）的代码吗？目前，您要求社区为您编写函数，人们不太可能对此做出良好反应。如果我们可以看到您现有的代码，并且您解释了该行为的意外之处，则更有可能有人能够帮助您找出问题所在。 （有关详细信息，请参阅How to Ask。）

@Tim 我已经输入了函数，老实说我只是更改了下一个问题函数。当然，我没想到有人会为我编写完整的函数，但那是因为我认为前一个函数应该与下一个函数类似。您知道正确执行此操作的方法吗？ （这是我的第一次尝试，但我还是新手，所以它根本没有意义）。

【参考方案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 的顺序 - 如果它应该从最小到最大，或者相反。

【讨论】：

感谢您的解释！虽然我没能做到，但你帮我迈出了一大步。我确实添加了完整的代码来向那些也有问题的人展示。我仍然需要修复它，但修复后我会再次编辑它

好东西，很高兴它有帮助！确保您没有从您的问题中编辑问题，因为该问题应该仍然是其他人将来从中受益的有效问题。但是，如果您更新代码并遇到另一个问题，请随时就该问题提出另一个问题。