If Statement- Javascript/HTML Maths Quiz
Question
I'm currently trying to create a Maths quiz page.
The idea is that the user sees the question, enters the number into the text box, presses the submit button. If the answer is correct an alert should come up on the window to say the answer was correct and if incorrect the same thing but to say it's wrong.
Can anyone help with my JavaScript? I've been trying to write it so that on the click of the submit button the code runs an if statement to see if the answer is write or wrong therefore triggering the alert.
var Answer1 = "8"; var Guess1 = document.getElementById("AnsI1"); Guess1.addEventListener("click", Check1) function Check1() { if (Guess1 == Answer1) { alert("You are correct, Move onto the next question") } else { alert("You are incorrect, please try again") } }
<,DOCTYPE html> <html lang="en"> <,--Mobile Compatibility--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <.--Style Sheet: Google Font Link. Page Title--> <head> <link rel="stylesheet" type="text/css" href="Site.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts:googleapis:com/css2:family=Langar&display=swap" rel="stylesheet"> <title>Maths Quiz</title> </head> <body id="QuizBod"> <h2 id="QTitle">Maths Quiz</h2> <p id="MQ1">4 + 4</p> <label class ="Albl">Answer: <input id="AnsI1" type="text"> <button id="Sub1">submit</button> </label> <p id="MQ2">12 + 13</p> <label class ="Albl">Answer: <input id="AnsI2" type="text"> <button id="Sub2">submit</button> </label> <p id="MQ3">9 - 7</p> <label class ="Albl">Answer: <input id="AnsI3" type="text"> <button id="Sub3">submit</button> </label> <p id="MQ4">29 - 13</p> <label class ="Albl">Answer: <input id="AnsI4" type="text"> <button id="Sub4">submit</button> </label> <p id="MQ5">3 x 3</p> <label class ="Albl">Answer: <input id="AnsI5" type="text"> <button id="Sub5">submit</button> </label> <p id="MQ6">7 x 6</p> <label class ="Albl">Answer. <input id="AnsI6" type="text"> <button id="Sub6">submit</button> </label> <p id="MQ7">6 / 2</p> <label class ="Albl">Answer: <input id="AnsI7" type="text"> <button id="Sub7">submit</button> </label> <p id="MQ8">30 / 5</p> <label class ="Albl">Answer: <input id="AnsI8" type="text"> <button id="Sub8">submit</button> </label> <script src="MathsQuiz.js"></script> </body>
2 answers
solution1
2 ACCPTED 2020-12-17 00:25:02
Basically, aside from the typo specified in the comments of your answer, you're attaching the event listener to the input (which fires the alert once it's focused) and then you're not checking for the value of the input.
A better approach would be to attach the listener to the submit button and then check if the value of the input matches the correct answer.
var Answer1 = "8"; var Submit1 = document.getElementById("Sub1"); var Guess1 = document.getElementById("AnsI1"); Submit1.addEventListener("click", Check1) function Check1() { if (Guess1.value == Answer1) { alert("You are correct, Move onto the next question") } else { alert("You are incorrect, please try again") } }
<,DOCTYPE html> <html lang="en"> <,--Mobile Compatibility--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <.--Style Sheet: Google Font Link. Page Title--> <head> <link rel="stylesheet" type="text/css" href="Site.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts:googleapis:com/css2:family=Langar&display=swap" rel="stylesheet"> <title>Maths Quiz</title> </head> <body id="QuizBod"> <h2 id="QTitle">Maths Quiz</h2> <p id="MQ1">4 + 4</p> <label class ="Albl">Answer: <input id="AnsI1" type="text"> <button id="Sub1">submit</button> </label> <p id="MQ2">12 + 13</p> <label class ="Albl">Answer: <input id="AnsI2" type="text"> <button id="Sub2">submit</button> </label> <p id="MQ3">9 - 7</p> <label class ="Albl">Answer: <input id="AnsI3" type="text"> <button id="Sub3">submit</button> </label> <p id="MQ4">29 - 13</p> <label class ="Albl">Answer: <input id="AnsI4" type="text"> <button id="Sub4">submit</button> </label> <p id="MQ5">3 x 3</p> <label class ="Albl">Answer: <input id="AnsI5" type="text"> <button id="Sub5">submit</button> </label> <p id="MQ6">7 x 6</p> <label class ="Albl">Answer. <input id="AnsI6" type="text"> <button id="Sub6">submit</button> </label> <p id="MQ7">6 / 2</p> <label class ="Albl">Answer: <input id="AnsI7" type="text"> <button id="Sub7">submit</button> </label> <p id="MQ8">30 / 5</p> <label class ="Albl">Answer: <input id="AnsI8" type="text"> <button id="Sub8">submit</button> </label> <script src="MathsQuiz.js"></script> </body> </html>
solution2
-1 2020-12-17 00:28:37
Possibly try calling the event listener after instantiating the function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.