I'm having trouble with my quiz app. I have a button to submit answers and move on to the next question, but whenever I try to place it within the div that contains the quiz, the button disappears. Can someone please help me figure out what's wrong?
Below is my code snippet:
var quizApp = Quiz(questions, $('#quiz-area'));
quizApp.questionDisplay(); // currentQuestion = 0, valid question
$('#next').on('click', quizApp.nextQuestion);
$('#totalQuestions').text(questions.length);
// TODO: Add event listener for reset
$('#reset').on('click', quizApp.reset);#quiz-area{
margin: 150px 160px;
padding: 100px 40px 40px 40px;
width: 500px;
height: 400px;
background-image: url("http://hardwoodhustle.com/wp-content/uploads/2014/03/HWH-BG1.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-mox-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div #quiz-area{
border: red 1px solid;
}
#quiz-area ul {
border: 1px solid red;
}
#quiz-area li,
#quiz-area ul {
list-style-type: none;
padding-left: 0;
}<div id="quiz-area">
<div id="next">
<button id="next" type="submit">Submit Answer</button>
<div id="score"><span id="correct">0</span>/<span id="totalQuestions">20</span></div>
</div>
</div>