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

Posted by James Kim
James Kim
11,918 Points

Cannot set property 'innerHTML' of null

Hello! https://w.trhou.se/sdgh3g6ue5 For my code I get the error “Cannot set property 'innerHTML' of null” in the console.

The rest of the code seems to work except populating the HTML.

My two choices shows, but the question and progress do not. I tried looking over the code and couldnt find whats wrong.

Any help is appreciated, thank you!

Side note: When I tried to press the space bar in while typing out this question, it pauses and unpauses the video instead of inputting a space in the text. I think this is a problem on my computer's end. How do i fix this? (I had to write the text in Word then paste it here)

5 Answers

Daniel Jenkins
Daniel Jenkins
17,714 Points
Daniel Jenkins
Daniel Jenkins
17,714 Points

Hi, I made the same mistake with the title, I think it's because of what appears in the code during the lesson. Your line in QuizUI.js

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

should read 

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

because that is the name of the property in the Question object in question.js.

Your progress isn't showing up because you spelled 'progress' with an extra 's' on line 40 of QuizUI.js:

this.populateIdWithHTML("progresss", "Question " + currentQuestionNumber + " of " + quiz.questions.length);

Hope that helps!

James Kim
James Kim
11,918 Points

Thank you so much! Those two fixes solved the problem.

Daniel Jenkins
Daniel Jenkins
17,714 Points
Daniel Jenkins
Daniel Jenkins
17,714 Points

Glad to help, had very similar problems myself!

James Kim
James Kim
11,918 Points

I looked at the link and my code didnt have those errors. The error is probably something dumb on my end but I can't seem to find it.

Tom Checkley
Tom Checkley
25,165 Points
Tom Checkley
Tom Checkley
25,165 Points

I also had the same problem, i realised it was because I had my JS files loading in the head so the HTML hadn't rendered when the JS looked for it. Worth bearing in mind if like me you are used to using jQuery with document ready and loading it in the head of your html.

lawton browning
lawton browning
1,767 Points
lawton browning
lawton browning
1,767 Points

Having a similar issue here but in a different part of the code. Here is my quiz_ui.js

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]);
        }
    },
    displayScore: function() {
        var gameOverHTML = "<p>Game Over</p>";
        gameOverHTML += "<p>Your score is" + quiz.score + "</p>";
        this.populateIdWithHTML("quiz", gameOverHTML);
    },

    populateIdWithHTML: function(id, text){
        var element = document.getElementById(id);
        element.innerHTML = text;                                             // Cannot set property 'innerHTML' of null
    },
    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);
    }
}

and here is my variation on the index.html for reference as i am not using the treehouse coding space

<body>
  <h1>Javascript quiz</h1>
  <div id="quiz">
    <p id=choice0></p>
    <br />
    <button id="guess0">select answer</button>
    <br />    

    <p id=choice1></p>
    <br />
    <button id="guess1">Select answer</button>
  <footer>
    <p id="progress">Question x of y</p>
  </footer>
  </div>
  <script src="js/question.js"></script>    <script src="js/quiz.js"></script>    <script src="js/quiz_ui.js"></script>    <script src="js/app.js"></script>
</body>

also dumb question but how do you copy in code so that its nicely formatted like in examples above. thanks in advance for any help, cheers
lawton browning
lawton browning
1,767 Points

oh i see now the backticks format the code..

Nick Fite
Nick Fite
11,168 Points
Nick Fite
Nick Fite
11,168 Points

Having a similar problem, can't tell where the error is. Here's my code:

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

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

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); } };