Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAbdi Ahmed
7,151 PointsBoolean condition always evaluating to false
Hi everyone
This one's for all the JavaScript gurus!
Basically I have my program, which is a quiz, and I am getting an unexpected result in one of my boolean values. The following is the program code:
window.onload = function(){
var attr;
var currentQuestion = 0;
var allQuestions = [
{question: 'Which turkish club did former Leeds player Harry Kewell join in 2008, which caused an uproar amongst Leeds supporters?', choices: ['Galatasaray', 'Besiktas', 'Fenerbahce', 'Sivaspor'], correctAnswer: 0},
{question: 'Who is the former Liverpool star who beat Ruud Van Nistelrooy\'s record of most prolific foreign goalscorer in their debut in the Premier League?', choices: ['Micheal Owen', 'Xabi Alsonso', 'Luis Suarez', 'fernando Torres'], correctAnswer: 3},
{question: 'Who scored Liverpool\s winner in \'that\' first 4-3 game against Kevin Keegan\'s Newcastle United in April 1996?', choices: ['Stan Collymore', 'Phil Baab', 'Steven Gerrard', 'Jamie Carragher'], correctAnswer: 0},
{question: 'Which former Aston Villa and Ireland midfielder went on to become a regular TV pundit with ITV?', choices: ['Dwight Yorke', 'Stan Collymore', 'Andy Townsend', 'Steve Staunton'], correctAnswer: 2},
{question: 'How many European Cups had Liverpool won up to and including 2007-8?', choices: ['8', '4', '5', '3'], correctAnswer: 2}
];
//grab each of the option divs and assign the 4 options from array
function loadQuestions(questionNumber){ var sequence = 1; var questionQuiz = document.getElementById('quiz-question');
questionQuiz.innerHTML = allQuestions[questionNumber].question;
for(var i = 0;i<4;i++){
var option = document.getElementById('option' + sequence);
sequence++;
option.innerHTML = allQuestions[questionNumber].choices[i];
}
}
loadQuestions(currentQuestion);
//add evet listeners to each of the options
function optionClickHandler(){ var sequence = 1;
for(var i=0; i<4; i++){
var option = document.getElementById('choice' + sequence);
attr = option.getAttribute("id");
var show = convertOptionToNumber(attr);
console.log(show);
option.addEventListener("click", checkCorrectAnswer);
sequence++;
}
}
optionClickHandler();
function convertOptionToNumber(option){
if(option === 'choice1'){
option = 0;
} else if(option === 'choice2'){
option = 1;
} else if(option === 'choice3'){
option = 2;
} else if(option ==='choice4'){
option = 3;
}
return parseInt(option);
}
function checkCorrectAnswer(){
var userChoice = convertOptionToNumber(attr);
var correct = allQuestions[currentQuestion].correctAnswer;
parseInt(correct);
if (userChoice === correct) {
alert('Correct!');
} else {
alert('Incorrect!');
}
console.log('The correct answer for question one ' + correct);
}
The boolean condition I'm referring to is the one inside the checkCorrectAnswer function. Here I'm testing to see if the correct answer has been clicked on - if it has then it should evaluate to true otherwise false and execute everything after the else statement. However the if condition is always evaluating to false and I am getting 'Incorrect' even when I click on the right answer.
Here is the index.html file:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Quiz</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="wrapper">
<h1>Football Quiz</h1>
<div id="question-number">
<p>You are on Question <span id="count"></span></p>
</div> <!-- end of question counter div -->
<div id="timer">
<p></p>
</div> <!-- end of timer div -->
<p id="quiz-question"></p>
<div id="question-body">
<a id="choice1" href="#"><div class="options">
<p id="option1"></p>
</div></a>
<a id="choice2" href="#"><div class="options">
<p id="option2"></p>
</div></a>
<a id="choice3" href="#"><div class="options">
<p id="option3"></p>
</div></a>
<a id="choice4" href="#"><div class="options">
<p id="option4"></p>
</div></a>
</div> <!-- end of question body div -->
</div>
<script type="text/javascript" src="js/app1.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </body> </html>
Your assistance is greatly appreciated.
Abdi Ahmed
7,151 Points@Marcus I can't see an edit button to reformat.
Marcus Parsons
15,719 PointsYou have to click the 3 dots "..." underneath your post that have a gray background and edit is under that menu.
3 Answers
Abdi Ahmed
7,151 PointsI managed to fix the error. It wasn't to do with the value in the attr variable, but it was the for loop that was causing the problem. I removed the for loop and created 4 variables for each of the ID's. The for loop was always assigning the last options attribute to the attr variable so this meant that in every case the attr variable would contain the number 3 from the conversion. Here is an updated function:
function optionClickHandler(){
var option1 = document.getElementById('choice1');
var option2 = document.getElementById('choice2');
var option3 = document.getElementById('choice3');
var option4 = document.getElementById('choice4');
option1.onclick = function(){
checkCorrectAnswer(option1)
}
option2.onclick = function(){
checkCorrectAnswer(option2)
}
option3.onclick = function(){
checkCorrectAnswer(option3)
}
option4.onclick = function(){
checkCorrectAnswer(option4)
}
}
elk6
22,916 PointsHi Abdi,
You're missing the quote marks around correct. It's a string so it's needs to be evaluated as one.
Try:
if (userChoice === 'correct') {
Abdi Ahmed
7,151 Points@Elian - correct is a variable that contains a the index for the correct answer - I assigned the number a few lines above it like this: var correct = allQuestions[currentQuestion].correctAnswer; parseInt(correct);
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsCan you please reformat your code like the image below and then post a comment when you do? If you just edit the question, I won't get an update, but if you post a comment, I will. Put "javascript" for your language and make sure there are blank spaces above the 3 backtick characters and below the ending 3 backtick characters: