Question

我的测验被抓住了，并且在给出正确答案时不会传递给下一个问题。

＆＃13;

namespace MyApp\Controller;

class MyOtherClass{

    public function __construct(){
       //some code
    }

    public function run(\Slim\Http\Request $request, \Slim\Http\Response $response, $args = []) {
       //some amazing foobar code
    }

＆＃13;

//loop through questions when right answer is given
function questFunc() {
  "use strict";
  //create array with my questions
  var qArray = ["What is the answer to the sum 1 + 1?", "If I have two eggs         and I drop one how many do I have left?", "What are the three primary colors?"];
  var aArray = ["2", "1", "What are the three primary colors?"];
  //create variables
  var pageCounter = 1;
  var qCounter = 0;
  var aCounter = 0;
  var theQuestions = document.getElementById("theQuestions");
  var pageNum = document.getElementById("pageNum");
  var theAnswer = document.getElementById("theAnswer").value;

  if (qCounter < qArray.length) {
    theQuestions.innerHTML = qArray[qCounter];
    pageNum.innerHTML = pageCounter;
    //not working - not allowing questions to move on when right answer is given.
    if (theAnswer === aArray[aCounter]) {
      qCounter++;
      aCounter++;
      pageCounter++;
    }
  } else if (qCounter >= qArray.length) {
    theQuestions.innerHTML = "Well Done!";
    pageNum.style.display = "none";
  }
}

＆＃13;

Answer 1

您正在通过＆＃34;下一步＆＃34;来电话questFunc按钮，但您所在状态的全部是该功能的本地。因此，每次调用函数时都会重新创建所有状态。

相反，移动不属于该函数的函数调用 out 的状态。由于全局变量是Bad Thing™，我们通过将所有状态（和函数）包装在作用域函数中来实现，然后使用现代事件处理将其挂起而不是onclick。（onxyz - 属性样式的事件处理程序只能调用全局函数。这是不使用它们的众多原因之一。）

因此，我们的范围界定功能只是为了保持内容：

(function() {
    // Our code here
})();

...我们的按钮是：

<button id="next-button">NEXT</button>

...我们使用addEventListener：

将其连接起来

document.getElementById("next-button").addEventListener("click", questFunc);

（如果您需要支持过时的IE版本，请参阅this answer。）

请参阅代码段，了解我从该功能中移出的状态，并查看其他注意事项的注释：

＆＃13;

(function() {
  "use strict";
  
  var qArray = ["What is the answer to the sum 1 + 1?", "If I have two eggs         and I drop one how many do I have left?", "What are the three primary colors?"];
  var aArray = ["2", "1", "What are the three primary colors?"]; // Third answer looks like a copy-and-paste error
  // We only need one counter, and let's start it at -1 because the first click
  // starts the quiz
  var counter = -1;
  var theQuestions = document.getElementById("theQuestions");
  var pageNum = document.getElementById("pageNum");
  // Might as well get the answer field too
  var theAnswer = document.getElementById("theAnswer");
  
  // Hook up the button
  document.getElementById("next-button").addEventListener("click", questFunc);
  
  function questFunc() {
    // Get their answer (if any)
    var answer = theAnswer.value.trim(); // trim just to strip leading/trailing spaces

    // If we're just starting the quiz or they answered correctly, show the next
    if (counter == -1 || answer === aArray[counter]) {
      counter++;
      if (counter >= qArray.length) {
        // Done with quiz
        theQuestions.innerHTML = "Well Done!";
        pageNum.style.display = "none";
      } else {
        // Show the now-current question
        theQuestions.innerHTML = qArray[counter];
        pageNum.innerHTML = (counter + 1);
      }
      // Always clear the answer
      theAnswer.value = "";
    } else {
      // Incorrect answer, probably worth saying something here
    }
  }
})();

＆＃13;

<div>
  <h1 id="quizTitle">My JavaScript Quiz
  </h1>
  <p id="theQuestions">Click NEXT to start quiz..
  </p>
  <form id="" action="#" method="post">
    <!-- Form Needs Columns -->
    <div id="">
      <label for="theAnswer"></label>
      <input type="text" id="theAnswer" tabindex="1">
    </div>
  </form>
  <span id="pageNum">
      </span>
  <button id="next-button">NEXT</button>
</div>

＆＃13;

Answer 2

您的计数器在功能范围内：＆＃34;双击下一步＆＃34;。

＆＃13;

//loop through questions when right answer is given
  var pageCounter = 1;
  var qCounter = 0;
  var aCounter = 0;
  var qArray = ["What is the answer to the sum 1 + 1?","If I have two eggs and I drop one how many do I have left?","What are the three primary colors?"];
  var aArray = ["2","1","What are the three primary colors?"];




function questFunc() {

  var theQuestions = document.getElementById("theQuestions");
  var pageNum = document.getElementById("pageNum");
  var theAnswer = document.getElementById("theAnswer").value;
  
  if (qCounter < qArray.length) {
    theQuestions.innerHTML = qArray[qCounter];
    pageNum.innerHTML = pageCounter;
    //not working - not allowing questions to move on when right answer is given.
    if (theAnswer === aArray[aCounter]) {
      qCounter++;
      aCounter++;
      pageCounter++;
    }
  } else if (qCounter >= qArray.length) {
    theQuestions.innerHTML = "Well Done!";
    pageNum.style.display = "none";
  }
}

＆＃13;

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="quiz-css.css" />
<link rel="stylesheet" type="text/javascript" href="quiz-css.css" />
</head>

<body onload="">

<div>
    <h1 id="quizTitle">My JavaScript Quiz
    </h1>
    <p id="theQuestions">Click NEXT to start quiz..
    </p>
    <form id="" action="#" method="post">
                <!-- Form Needs Columns -->
        <div id="">
            <label for="theAnswer"></label>
            <input type="text" id="theAnswer" tabindex="1">
        </div>
    </form>
    <span id="pageNum">
    </span>
    <button onclick="questFunc()">NEXT</button>
</div>

<script src="quiz-js.js"></script>
</body>
</html>

＆＃13;

测验不会继续

2 个答案: