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 User Interface Code

Troy Brynelson
Troy Brynelson
11,892 Points
Posted by Troy Brynelson
Troy Brynelson
11,892 Points

Cannot set property 'innerHTML' of null

Been plugging away at QuizUI.js. The code works fine for the first question but, after hitting question one's button, it feeds an error in the console:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Can't figure out what I'm doing wrong but it's possible I'm just tired.

Any help appreciated.

https://w.trhou.se/hxz2wozcbs

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

What button? This must not be all the code.

To share the whole project, make a snapshot of your workspace and post the link to it here.

Troy Brynelson
Troy Brynelson
11,892 Points
Troy Brynelson
Troy Brynelson
11,892 Points

Sorry about the formatting problem, Steven and Neil. I've edited post.

Appreciate your help.

1 Answer

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Troy. I was able to switch my quiz_ui.js file for yours and found 2 issues. I have posted your code again below for easier reference.

var QuizUI = {
    displayNext: function () {
     if (quiz.hasEnded()) {
        this.displayScore();
} else {
    this.displayQuestion();
    this.displayChoices();
    this.displayProgress();
    }
}, 

displayQuestion: function () { 
      this.populateIdWithHTML("question", quiz.getCurrentQuestion().question);
}, 

displayChoices: function() {
    var choices = quiz.getCurrentQuestion().choices;

    for (var i = 0; i < choices.length; i++) {
    this.populateIdWithHTML("choice" + i, choices[i]);
    this.guessHandler("guess" + i, choices[i]);
    }
}, 

displayScore: function() {
    var gameOverHTML = "<h1>Game Over</h1>";
    gameOverHTML += "<h2> Your score is: " + quiz.score + "</h2>";
    this.populateIdWithHTML("quiz", gameOverHTML);
},

populateIdWithHTML: function(id, text) {
    var element = document.getElementById(id);
    element.innerHTML = text;
},

guessHandler: function(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
    quiz.guess(guess);
    QuizUI.displayNext();
    }
}, 

displayProgress: function() {
    var currentQuestionNumber = quiz.currentQuestionindex + 1;
    this.populateIdWithHTML("progress", "Question " + currentQuestionNumber + " of " + quiz.questions.length);
    }
}

Issue 1: The questions are not being displayed and instead it displays 'undefined'.

Solution 1: Line 13. Replace 'question' with 'text'

      this.populateIdWithHTML("question", quiz.getCurrentQuestion().text);

Issue 2: The progress element at the bottom is showing NaN.

Solution 2: Line 45. quiz.currentQuestionindex needs to be quiz.currentQuestionIndex

    var currentQuestionNumber = quiz.currentQuestionIndex + 1;

I note these are not the problems you have reported but they may help, but if not, posting the entire code in the way suggested by Steven will help.

Troy Brynelson
Troy Brynelson
11,892 Points
Troy Brynelson
Troy Brynelson
11,892 Points

Thanks for the answer Neil. I made these edits, so I appreciate what you managed to sort out even without full code.

I'm still getting the error and updated the post with a snapshot, so maybe that will help. In the meantime I'm going to go back through the course and see if anything stands out.

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

1: Ah OK. Seeing the full story has helped. The main problem can be found in the app.js file here...

var questions = [
    new Question("What's my name?", ["Troy", "Lacey" ], "Troy"),
    new Question("What movie am I watching?" ["The Boss Baby", "Lord of the Rings"], "The Bossy Baby"),
    new Question("What is my cat's name?", ["Sammy", "Dingus"], "Sammy")
];

var quiz = new Quiz(questions);

QuizUI.displayNext();

Line 3 just needs a comma after 'What movie am I watching?'

2: Staying with this file, I took your test, but could only score 2 out of 3. The reason being that the official answer was spelt as 'Bossy' rather than 'Boss'.

3: My original Issue1/Solution1 can be ignored as I see from your question.js file that you switched 'text' with 'question' there too so you have been consistent.

4: My suggested change Issue2/Solution2 still needs to be done but this alone did not fix the NaN problem for you. The additional problem is with your 'quiz.js' file.

function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;
};

Quiz.prototype.guess = function(answer) {
    if (this.getCurrentQuestion().isCorrectAnswer(answer)) {
        this.score++;
    }
    this.questionIndex++;
};

Quiz.prototype.getCurrentQuestion = function () {
    return this.questions[this.questionIndex];
};

Quiz.prototype.hasEnded = function () {
    return this.questionIndex >= this.questions.length;
};

In here you have 4 instances of 'questionIndex' but all 4 should actually read 'currentQuestionIndex'. That should resolve the NaN issue.

Troy Brynelson
Troy Brynelson
11,892 Points
Troy Brynelson
Troy Brynelson
11,892 Points

Thanks a lot Neil. Very helpful.

Also I promise this isn't shoddy viral marketing for The Boss Baby.