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 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