Why is my variable returning undefined in javascript?
Question
I am new to javascript. I am making a flashcard program. For some reason, despite defining the variable lastPress as global, lastPress seems to return undefined. However, it is not resulting in an error in JSHint. Here's my code:
var i = 0; var questions = ["1: Was the human migration caused by an ice age?", "True"]; var answer = [true, true]; var lastPress; document.getElementById("question").innerHTML = questions[i]; function itsTrue() { lastPress = true; } function itsFalse() { lastPress = false; } function getAns() { if (answer[i] == lastPress) { document.getElementById("ans").innerHTML = "You're correct! The answer was " + lastPress; } else { document.getElementById("ans").innerHTML = "We're sorry, but that is not correct. You said " + lastPress + ". The answer was " + answer[i]; } i++; document.getElementById("question").innerHTML = questions[i]; } document.getElementById("true").onclick = function(){itsTrue()}; document.getElementById("true").onclick = function(){getAns()}; document.getElementById("false").onclick = function(){itsFalse()}; document.getElementById("false").onclick = function(){getAns()};
<!DOCTYPE HTML> <html> <head> <title>Flash cards</title> </head> <body> <p id="question">This is where the question shows up</p> <p id="ans">This is where the result will show up</p> <button type="button" id="true">True</button> <button type="button" id="false">False</button> </body> </html>
2 answers
solution1
1 ACCPTED 2019-12-09 20:38:55
if you want to define multiple functions to the same click event: also, after the second press on your true false buttons i is incremented to 2 thus questions[2] is undefined
var i = 0; var questions = ["1: Was the human migration caused by an ice age?", "True"]; var answer = [true, true]; var lastPress; document.getElementById("question").innerHTML = questions[i]; function itsTrue() { console.log('true') lastPress = true; } function itsFalse() { console.log('false'); lastPress = false; } function getAns() { if (answer[i] == lastPress) { document.getElementById("ans").innerHTML = "You're correct! The answer was " + lastPress; } else { document.getElementById("ans").innerHTML = "We're sorry, but that is not correct. You said " + lastPress + ". The answer was " + answer[i]; } i++; console.log(i); document.getElementById("question").innerHTML = questions[i]; } document.getElementById("true").onclick = function(){itsTrue();getAns();}; //document.getElementById("true").onclick = function(){getAns()}; document.getElementById("false").onclick = function(){itsFalse(),getAns();}; // document.getElementById("false").onclick = function(){getAns()};
<!DOCTYPE HTML> <html> <head> <title>Flash cards</title> </head> <body> <p id="question">This is where the question shows up</p> <p id="ans">This is where the result will show up</p> <button type="button" id="true">True</button> <button type="button" id="false">False</button> </body> </html>
solution2
0 2019-12-09 20:25:43
It wasn't clear, in your question, what returned undefined so i assumed it was what was updated in your HTML.
Your code returns undefined because you are incrementing i at each click. But your array is only, two element long. You need to handle the fact that all your question has been shown. Here i've simply reset the variable i to 0, but i'm not sure if that applies in your case.
var i = 0; var questions = ["1: Was the human migration caused by an ice age?", "2. this is a second question, true or false ? ", "3. did i got you with my last tricky question?"]; var answer = [true, true, false]; var lastPress; document.getElementById("question").innerHTML = questions[i]; function itsTrue() { lastPress = true; } function itsFalse() { lastPress = false; } function getAns() { if (answer[i] == lastPress) { document.getElementById("ans").innerHTML = "You're correct! The answer was " + lastPress; } else { document.getElementById("ans").innerHTML = "We're sorry, but that is not correct. You said " + lastPress + ". The answer was " + answer[i]; } i++; if(i >= questions.length) { i = 0; } document.getElementById("question").innerHTML = questions[i]; } document.getElementById("true").onclick = function(){itsTrue(); getAns() }; document.getElementById("false").onclick = function(){itsFalse(); getAns()};
<!DOCTYPE HTML> <html> <head> <title>Flash cards</title> </head> <body> <p id="question">This is where the question shows up</p> <p id="ans">This is where the result will show up</p> <button type="button" id="true">True</button> <button type="button" id="false">False</button> </body> </html>
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.
Related Question
Why is my variable tabledata returning undefined?
Why is my JavaScript code returning undefined
why is my javascript object method returning undefined?
Javascript returning undefined on variable
Why is this variable returning undefined?
why is this variable returning "undefined"
Why is my variable returning as 'undefined' despite being set a value?
Why is my console.log returning undefined in JavaScript?
Function returning undefined variable Javascript
variable returning undefined value in javascript
Related Tags