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 and the DOM (Retiring) Making Changes to the DOM Appending Nodes

Posted by Jonathan Ambriz
Jonathan Ambriz
Courses Plus Student 3,902 Points

I think I have a syntax error..

The link for the snapshot of my code is http://w.trhou.se/4dah2apu47 I don't see the Add Item Button that I see in the tutorial. I had this issue previously, but it was due to a missing quotation mark. Not sure what it is this time.

2 Answers

Simon Coates
Simon Coates
8,177 Points
Simon Coates
Simon Coates
8,177 Points

If you look at the javascript console when previewing the page, it'll give you error message. I think it's trying to add event handlers or modify text of object that you haven't successfully retrieved. Your selectors for elements seem flawed (you seem to have added 'description' as a prefix to type selector) and the button's class has a spelling error ("descripion"). For instance, the selector of 'descriptionP.description' should probably be 'p.description'.

Jonathan Ambriz
Jonathan Ambriz
Courses Plus Student 3,902 Points

Thanks for the quick response. I'll play around with the console and see if I can find any more info. I guess this'll be my intro to debugging as well!

Jonathan Ambriz
PLUS
Jonathan Ambriz
Courses Plus Student 3,902 Points
Jonathan Ambriz
Jonathan Ambriz
Courses Plus Student 3,902 Points

I get the following error:

app.js:20 Uncaught TypeError: Cannot read property 'addEventListener' of null

Line 20 was working in the previous exercise, and I'm not sure how to interpret the error. Does that mean the variable that the .addEventListener is called on is null?

Simon Coates
Simon Coates
8,177 Points
Simon Coates
Simon Coates
8,177 Points

Yes, addEventListener or setting properties require that you do these on objects, rather than the null value. The first thing you do when debugging is test your assumptions. The first assumption here (after verifying that the script is executing) is that the variables created at the top have actually selected what they were meant to. If you type in the variable name into the console and hit enter, you can view values. For example, if I were testing selecting a couple elements, I might run something like:

let aDiv = document.querySelector("div");
aDiv; // output in console: <div id=​"custom-bg" style=​"opacity:​ 0;​">​</div>​
let nothingHere = document.querySelector("nonsense");
nothingHere;//outputs null in console.

With the above, I can alter the value of aDiv or set an event handler. But if i do these on nothingHere, i'll get an error and my code will crash.

(the code snippet above was run against google using the console. The point of it is that I can observe the values via the console and then build on top of that. If you were needing to observe values in a more complex bit of code, you could use watch values in the console or use console.log to get a look at the value and, establishing you have correct object, set properties or events on the object. Littering the code with console.log statements is cheap and dirty but it can help examine values and code flow.)