JavaScript JavaScript and the DOM Making Changes to the DOM Appending Nodes

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
3,086 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'.

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!

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
3,086 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.)