Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Object-Oriented JavaScript (2015) Practice Project Project Overview

Ben Bushell
Ben Bushell
10,838 Points

onclick and if else

Hi,

Still quite a lot of work to do to finish this off, however Ive come across a problem I cant seem to figure out. I have an if statment in my quiz_ui.js file that doesn't seem to work. Even if the statement is true it is still reverting to following else.

Ive put a note in the code next to the if statement.

Thanks in advance for any help.

question.js

function Question(ask, correct, wrong) {
  this.ask = ask;
  this.correct = correct;
  this.wrong = wrong;
}

Question.prototype.askToHTML = function() {
  var htmlString = '<h2>'
  htmlString += this.ask;
  htmlString += '</h2>';
  return htmlString;
}

Question.prototype.correctToHTML = function() {
  var htmlString = '<p>'
  htmlString += this.correct;
  htmlString += '</p>';
  return htmlString;
}

Question.prototype.wrongToHTML = function() {
  var htmlString = '<p>'
  htmlString += this.wrong;
  htmlString += '</p>';
  return htmlString;
}

quiz.js

function Quiz() {
  this.questions = [];
  this.questionsAnswered = 0;
  this.correctAnswers = 0;
}

Quiz.prototype.add = function(question) {
  this.questions.push(question);
}

Quiz.prototype.renderInQuestion = function(element) {
  element.innerHTML = "";
  element.innerHTML += this.questions[this.questionsAnswered].askToHTML();
}

Quiz.prototype.renderInCorrect = function(element) {
  element.innerHTML = "";
  element.innerHTML += this.questions[this.questionsAnswered].correctToHTML();
}

Quiz.prototype.renderInWrong = function(element) {
  element.innerHTML = "";
  element.innerHTML += this.questions[this.questionsAnswered].wrongToHTML();
}

Quiz.prototype.nextQuestion = function(variable) {
  this.questionsAnswered ++;
  variable.renderInQuestion(questionElement);
  variable.renderInCorrect(choice0Element);
  variable.renderInWrong(choice1Element);  
}

Quiz.prototype.finalHTML = function() {
  var finalHTML = '<h2>';
  finalHTML += 'You got ';
  finalHTML += quiz.correctAnswers;
  finalHTML += ' right</h2>';
  return finalHTML;

  questionElement.innerHTML = finalHTML;
  choice0Element.innerHTML = "";
  choice1Element.innerHTML = "";
}

app.js

var quiz = new Quiz();

var questionOne = new Question("Who is the current Arsenal F.C manager?", "Arsene Wenger", "Alex Ferguson");

var questionTwo = new Question("Who is the current Man UTD F.C manager?", "Jose Mourinho", "Alex Ferguson");

quiz.add(questionOne);
quiz.add(questionTwo);

var questionElement = document.getElementById("question");
var choice0Element = document.getElementById("choice0");
var choice1Element = document.getElementById("choice1");

quiz.renderInQuestion(questionElement);
quiz.renderInCorrect(choice0Element);
quiz.renderInWrong(choice1Element);

quz_ui.js

var correctButton = document.getElementById("guess0");
correctButton.onclick = function() {
  if (quiz.questionsAnswered === quiz.questions.length) { //problem seems to be here..
    quiz.correctAnswers ++;
    quiz.finalHTML();
  } else {
    quiz.correctAnswers ++;
    quiz.nextQuestion(quiz);    
  }
}

var wrongButton = document.getElementById("guess1");
wrongButton.onclick = function() {
  if (quiz.questionsAnswered === quiz.questions.length) {
    quiz.finalHTML();
  } else {
    quiz.nextQuestion(quiz);    
  } 
}

1 Answer

Neil McPartlin
Neil McPartlin
14,662 Points

Hi Ben. I do see a sequencing problem with the code, which explains the problem you have identified. At the instant the 2nd question is answered (clicked), quiz.questionsAnswered still only equals 1 and not yet 2. It looks like questionsAnswered will only get incremented by 1, when the (non existent) 3rd question gets posed. (Line 27 of quiz.js).

So comment out line 27 of quiz.js like so.

  Quiz.prototype.nextQuestion = function(variable) {
    // this.questionsAnswered ++;
    variable.renderInQuestion(questionElement);
    variable.renderInCorrect(choice0Element);
    variable.renderInWrong(choice1Element);  
  }

and add this incrementing code to these two locations in quiz_ui.js

var correctButton = document.getElementById("guess0");
correctButton.onclick = function() {
    quiz.questionsAnswered ++; //NEW ENTRY
  if (quiz.questionsAnswered === quiz.questions.length) { //problem seems to be here..
    quiz.correctAnswers ++;
    quiz.finalHTML();
  } else {
    quiz.correctAnswers ++;
    quiz.nextQuestion(quiz);    
  }
}

var wrongButton = document.getElementById("guess1");
wrongButton.onclick = function() {
    quiz.questionsAnswered ++; //NEW ENTRY
  if (quiz.questionsAnswered === quiz.questions.length) {
    quiz.finalHTML();
  } else {
    quiz.nextQuestion(quiz);    
  } 
}
Ben Bushell
Ben Bushell
10,838 Points

Hi Neil, Thank you very much, seems so simple once you see it! Much appreciated.

Neil McPartlin
Neil McPartlin
14,662 Points

You are very welcome. You were the one who identified where the problem was and I got lucky because I had just done this workshop a few days ago...

https://teamtreehouse.com/library/debugging-javascript-in-the-browser

Using the Chrome debugger, I was able to literally pause the running code right on the line just after that if statement. Once I could see it was still sitting at '1' instead of '2', the rest was straight forward.