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

Ellis Beale
Ellis Beale
2,664 Points
Posted by Ellis Beale
Ellis Beale
2,664 Points

innerHTML changing my formatting?

I had the lists of questions outputting nicely, but when I changed the print function to use innerHTML per the video, it came out as unordered lists with the questions on the next line down from the bullets. Why would this happen?

function answerList(list) {
  print("<ol>");
  for ( i=0; i<list.length; i++ ) {
    print("<li>");
    print(list[i]);
    print("</li>");
  }
  print("</ol>");
}

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The "print" function shown in the video is intended to be used only once, and it would replace any previously output content if used again. So I expect yours is a bit different or you wouldn't see any output at all.

Please show the complete code to make it possible to analyze your issue. If you have it in a workspace, just use the "snapshot" (the camera icon) and post the link it gives you.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Your "print" function is a bit different from the video in that it adds to the element contents instead of replacing them. That in itself wouldn't cause any problem, but it looks like the browser is trying to help by adding closing tags for you when you update it with only open tags. This leaves the text outside of the list items.

You can avoid this issue if you use the method shown in the video where the message is assembled into a variable ("html") first, and then "print" is called only once.

Ellis Beale
Ellis Beale
2,664 Points
Ellis Beale
Ellis Beale
2,664 Points

Did as suggested, now it's working fine. Thank you!