Quiz project stuck : My quiz is getting caught and wont pass through on to the next question when the right answer is given. Im very new to Javascript, this is the first thing ive really tried to write. Any help (and explanation) would be massively appreciated!

HTML:

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

JS:

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

Thank you in advance.