Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects Accessing Object Properties

Stuck at 3:32 and don't know why...

I've compared my JavaScript code to what Dave has until my eyes have nearly bled. I'm coding within Visual Studio Code and no errors have been detected within VSC. However, when I launch index.html Google Chrome's console reports:

Uncaught TypeError: Cannot set property 'innerHTML' of null at print (object.js:11) at object.js:15

Here's my JavaScript coding (sorry but I can't figure out how to post it in a more readable format ... backticks do nada ... apologies especially for the comments in my code as they're there to help me given that I'm still learning, which will clearly be a LONG process):

var person = { /* The curly braces mean that an OBJECT is represented. Brackets would represent an array. / name : 'Sam', country : 'USA', / Notice how you can use strings in an object's property? / age : 33, / Notice how you can use numbers in an object's property? / CodeLouisville : true, / Notice how you can use boolean true/false values in an object's property? / skills : ['HTML', 'CSS', 'JavaScript'] / Notice how you can put an array as an object's property? */ };

function print(message) { var div = document.getElementById('output'); div.innerHTML = message; }

var message = '<p>Hello. My name is ' + person.name + '</p>'; /* FYI, person.name is the "dot notation" way of accessing info in an object. The object is person and the property is name, the value of which is Sam. As an alternative to "dot notation", you also could have used "bracket notation" -- person['name'] instead of person.name -- to access the same info. / print(message); / This just prints the above line's output to the page. */

Any clue what the problem seems to be?! Thanks in advance for any help that can be provided.

Here's a GitHub repository that I made for the project, if that helps (more user-friendly troubleshooting)! Thanks!

https://github.com/samallen502/practice-10-Object_Literal

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! So I cloned your GitHub repo and took a look around and found the error. Now, depending on how you look at it, the error is either in your HTML or your JavaScript.

You have this line in your JavaScript on line 10:

var div = document.getElementById('output');

This line should select a div with the id of "output". But in your HTML, there is no div with the id of "output". There is, however, a div with the id of "listDiv" on line 10:

<div id="listDiv">

</div>

You can either change the id in the HTML to "output" or you can change the selector in your JavaScript to be document.getElementById('listDiv'). Either one will work.

Hope this helps! :sparkles:

Thanks! I was following Treehouse's video and could've sworn that they didn't address that but this has been a teachable moment! Thanks again!

Stephanie Raymos
Stephanie Raymos
3,124 Points

They definitely did not address this because I had the same EXACT issue. But glad there's an answer to resolve it. Thanks