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 trial

JavaScript

Abdi Ahmed
Abdi Ahmed
7,151 Points
Posted by Abdi Ahmed
Abdi Ahmed
7,151 Points

Boolean 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.

Marcus Parsons
Marcus Parsons
15,719 Points

Can 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:

code

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

@Marcus I can't see an edit button to reformat.

Marcus Parsons
Marcus Parsons
15,719 Points

You have to click the 3 dots "..." underneath your post that have a gray background and edit is under that menu.

3 Answers

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

I 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
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi 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
Abdi Ahmed
7,151 Points
Abdi Ahmed
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);