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 Object-Oriented JavaScript (2015) Practice Project Project Overview

Ben Bushell
Ben Bushell
10,838 Points
Posted by 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
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
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
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.