Quiz won’t continue

Question

My quiz is getting caught and won’t pass through on to the next question when the right answer is given.

//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";
  }
}

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

Answer 1

You're calling questFunc from the "Next" button, but all of your state is local to that function. So all of your state is recreated every time the function is called.

Instead, move the state that isn't specific to the function call out of the function. Since globals are a Bad Thing™, we'll do that by wrapping all our state (and the function) in a scoping function, and then use modern event handling to hook it up instead of onclick. (onxyz-attribute-style event handlers can only call global functions. It's one of the many reasons not to use them.)

So our scoping function, just to keep things contained, is:

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

...and our button is:

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

...and we hook it up using addEventListener:

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

(See this answer if you need to support obsolete versions of IE.)

See the snippet for what state I moved out of the function, and see the comments for some other notes:

(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
    }
  }
})();

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

Answer 2

Your counters are within the function: "Double click next".

//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";
  }
}

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