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 JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

Marcio Mello
Marcio Mello
7,861 Points
Posted by Marcio Mello
Marcio Mello
7,861 Points

Need assistance with my code.

Hello everyone!

After watching the solution, I went back and tried to improve my previous solution. I decided to create a function that target the specific "node" in the DOM where the new HTML created should be placed.

He is how it looks like:

function print(node, message) {
  var outputNode = document.getElementById(node);
  outputNode.innerHTML = message;
}

It very similar to the Challenge Solution presented, but I decided to go with two parameter so it could be used on a bigger project.

However, when I try to run the project, I get the following error: หœCannot change innerHTML of nullหœ.

He is How I am trying to print it:

html += "<h2>You have got " + correctAnswers.length +  " out of 3 correct answers!</h2>";
document.write(html);

html = "<h3>Correct Answers</h3>";
html += createHtmlList(correctAnswers);
print("correctList", html);

html = "<h3>Wrong Answers</h3>";
html += createHtmlList(wrongAnswers);
print("wrongList", html);

The "correctList" and "wrongList"refers to the HTML

<div id="correctList">

</div>
<div id="wrongList">

</div>

I also added CSS to differentiate both list:

#correctList {
  color: blue;
}

#wrongList {
  color: red;
}

Can I get some help?

PS: If anyone wonder what the createHTMLList func is:

function createHtmlList( list ) {
    var htmlSnipet = "<ol>"
    for ( i = 0; i < list.length; i++ ) {
    htmlSnipet += "<li>" + list[i] + "</li>";
    }
    htmlSnipet += "</ol>";
    return htmlSnipet;
  }

my list of variables is:

var answer;
var correctAnswers = [];
var wrongAnswers = [];
var html;

var questions = [
  ["How many paws a dog has?", "4"],
  ["What is the name of our planet?", "earth"],
  ["Who is de president of the United States?", "obama"]
];

1 Answer

Gabriel D. Celery
Gabriel D. Celery
13,810 Points
Gabriel D. Celery
Gabriel D. Celery
13,810 Points

Where is your script tag loading the JS file compared to this?

<div id="correctList">

</div>
<div id="wrongList">

</div>

Make sure the divs are placed before the script so that they exist when the script is loaded.