Quiz not working properly, after clicking the submit button, nothing happens

Question

I made a quiz, I used a code that was online and formatted it a bit. So when you click on submit there should be an answer like u need to do more studying or something and a score.

 <div id="main"> <!-- open main div --> <div class="quizstyle"> <h1>Quiz</h1> <form id="form1" action=" "> <h3>Question 1</h3> <div class="row"><input name="variable" type="radio" value="0" />Answer 1</div> <div class="row"><input name="variable" type="radio" value="0" />Answer 2</div> <div class="row"><input name="variable" type="radio" value="33" />Answer 3</div> &nbsp; <h3>Question 2</h3> <div class="row"><input name="sub" type="radio" />Answer 1</div> <div class="row"><input name="sub" type="radio" />Answer 2</div> <div class="row"><input name="sub" type="radio" />Answer 3</div> &nbsp; <h3>Question 3</h3> <div class="row"><input name="con" type="radio" value="0" />Answer 1</div> <div class="row"><input name="con" type="radio" value="33" />Answer 2</div> <div class="row"><input name="con" type="radio" value="0" />Answer 3</div> </form></div> <input type="submit" value="Submit" /> Your grade is: <span id="grade">__</span> <p id="grade2"></p> </div> <!-- close main div --> <script> document.getElementById("form1").onsubmit=function() { variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); con = parseInt(document.querySelector('input[name = "con"]:checked').value); result = variable + sub + con; document.getElementById("grade").innerHTML = result; if (result == 0) {result2 = "I don't think you studied."}; if (result == 33) {result2 = "You need to spend more time. Try again."}; if (result == 66) {result2 = "I think you could do better. Try again."}; if (result == 99) {result2 = "Excellent!"}; document.getElementById("grade2").innerHTML = result2; return false; // required to not refresh the page; just leave this here } //this ends the submit function </script> 

Does anyone know what the problem may be ?

Answer 1

You need to put your submit <input type="submit> within your form, you didn't initialize your var result2 , and you didn't have a value set for your second question so it was reading NaN

 <div id="main"> <!-- open main div --> <div class="quizstyle"> <h1>Quiz</h1> <form id="form1" action=" "> <h3>Question 1</h3> <div class="row"> <input name="variable" type="radio" value="0" />Answer 1</div> <div class="row"> <input name="variable" type="radio" value="0" />Answer 2</div> <div class="row"> <input name="variable" type="radio" value="33" />Answer 3</div> &nbsp; <h3>Question 2</h3> <div class="row"> <input name="sub" type="radio" value="33" />Answer 1</div> <div class="row"> <input name="sub" type="radio" value="0" />Answer 2</div> <div class="row"> <input name="sub" type="radio" value="0" />Answer 3</div> &nbsp; <h3>Question 3</h3> <div class="row"> <input name="con" type="radio" value="0" />Answer 1</div> <div class="row"> <input name="con" type="radio" value="33" />Answer 2</div> <div class="row"> <input name="con" type="radio" value="0" />Answer 3</div> <input type="submit" value="Submit" /> </form> </div> Your grade is: <span id="grade">__</span> <p id="grade2"></p> </div> <!-- close main div --> <script> document.getElementById("form1").onsubmit = function() { variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); con = parseInt(document.querySelector('input[name = "con"]:checked').value); result = variable + sub + con; document.getElementById("grade").innerHTML = result; var result2 = ""; if (result == 0) { result2 = "I don't think you studied." }; if (result == 33) { result2 = "You need to spend more time. Try again." }; if (result == 66) { result2 = "I think you could do better. Try again." }; if (result == 99) { result2 = "Excellent!" }; document.getElementById("grade2").innerHTML = result2; return false; // required to not refresh the page; just leave this here } //this ends the submit function </script> 

Answer 2

You basically forgot to include submit button inside the form and also forgot to give values to 2nd question's radio inputs. Also initialization of result2 variable

here is working code

 <div id="main"> <!-- open main div --> <div class="quizstyle"> <h1>Quiz</h1> <form id="form1" action=" "> <h3>Question 1</h3> <div class="row"><input name="variable" type="radio" value="0" />Answer 1</div> <div class="row"><input name="variable" type="radio" value="0" />Answer 2</div> <div class="row"><input name="variable" type="radio" value="33" />Answer 3</div> &nbsp; <h3>Question 2</h3> <div class="row"><input name="sub" type="radio" value="0" />Answer 1</div> <div class="row"><input name="sub" type="radio" value="34" />Answer 2</div> <div class="row"><input name="sub" type="radio" value="0" />Answer 3</div> &nbsp; <h3>Question 3</h3> <div class="row"><input name="con" type="radio" value="0" />Answer 1</div> <div class="row"><input name="con" type="radio" value="33" />Answer 2</div> <div class="row"><input name="con" type="radio" value="0" />Answer 3</div> <input type="submit" value="Submit" /> </form> </div> Your grade is: <span id="grade">__</span> <p id="grade2"></p> </div> <!-- close main div --> <script> document.getElementById("form1").onsubmit=function() { variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); con = parseInt(document.querySelector('input[name = "con"]:checked').value); result = variable + sub + con; document.getElementById("grade").innerHTML = result; var result2 = "" if (result == 0) {result2 = "I don't think you studied."}; if (result == 33) {result2 = "You need to spend more time. Try again."}; if (result == 66) {result2 = "I think you could do better. Try again."}; if (result == 99) {result2 = "Excellent!"}; document.getElementById("grade2").innerHTML = result2; return false; // required to not refresh the page; just leave this here } //this ends the submit function </script> 

Answer 3

The form isn't being submitted, because the submit button needs to be inside the form. You also have some errors - like missing semicolons - and you've forgotten to add values for the second batch of answers.

See snippet.

 <div id="main"> <!-- open main div --> <div class="quizstyle"> <h1>Quiz</h1> <form id="form1" action=" "> <h3>Question 1</h3> <div class="row"><input name="variable" type="radio" value="0" />Answer 1</div> <div class="row"><input name="variable" type="radio" value="0" />Answer 2</div> <div class="row"><input name="variable" type="radio" value="33" />Answer 3</div> &nbsp; <h3>Question 2</h3> <div class="row"><input name="sub" type="radio" value="33" />Answer 1</div> <div class="row"><input name="sub" type="radio" value="0" />Answer 2</div> <div class="row"><input name="sub" type="radio" value="0" />Answer 3</div> &nbsp; <h3>Question 3</h3> <div class="row"><input name="con" type="radio" value="0" />Answer 1</div> <div class="row"><input name="con" type="radio" value="33" />Answer 2</div> <div class="row"><input name="con" type="radio" value="0" />Answer 3</div> <input type="submit" value="Submit" /> </form></div> Your grade is: <span id="grade">__</span> <p id="grade2"></p> </div> <!-- close main div --> <script> document.getElementById("form1").onsubmit = function() { variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); con = parseInt(document.querySelector('input[name = "con"]:checked').value); result = variable + sub + con; document.getElementById("grade").innerHTML = result; if (result === 0) { result2 = "I don't think you studied."; } if (result === 33) { result2 = "You need to spend more time. Try again."; } if (result === 66) { result2 = "I think you could do better. Try again."; } if (result === 99) { result2 = "Excellent!"; } document.getElementById("grade2").innerHTML = result2; return false; // required to not refresh the page; just leave this here }; </script>