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 Getting and Setting Text with textContent and innerHTML

Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,356 Points
Posted by Richard Preske
Richard Preske
Courses Plus Student 4,356 Points

Code not working in this lesson.

https://w.trhou.se/esp9x180yd

And when I run, this is the error I get in browser console

app.js:6 Uncaught TypeError: Cannot set property 'textContent' of null at HTMLButtonElement.<anonymous> (app.js:6)

who is anonymous?

2 Answers

Michael Cook
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points
Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points

Hey Richard, the reason this is not working is because the class "description" was applied to the input, not to the p tag. This is what you want: <p class="description">Things that are purple:</p>. Fix this and it works fine.

<anonymous>(app.js:6) here refers to the function where the error occurred. Since you were trying to set the textContent property of an object with a type of null inside an anonymous function, the error message is telling you the error took place inside <anonymous> at line 6 in app.js. Watch for this because it can really help you find where an error is occurring. Learning to understand these error messages is really useful for debugging your projects.

Richard Preske
Richard Preske
Courses Plus Student 4,356 Points
Richard Preske
Richard Preske
Courses Plus Student 4,356 Points

Thanks, but that's not what the instructor shows on the video. His works as I posted. I'll try it, thanks.

Richard Preske
Richard Preske
Courses Plus Student 4,356 Points
Richard Preske
Richard Preske
Courses Plus Student 4,356 Points

But that makes sense what you say because the change is to the description in the paragraph not the input. I just wonder why his works. He declares it here with the p element in app.js:

const p = document.querySelector("p.description");

Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points

As I said, the class was added to the input and now the p tag. When I changed that it worked properly. The instructor must have made a typo or something. It happens.

Alan Lane
Alan Lane
9,156 Points
Alan Lane
Alan Lane
9,156 Points

I just finished the workspace, and it looks like you missed one of the places that he added a class of description. There should be 3 places where you add the class:

<!DOCTYPE html> <html> <head> <title>JavaScript and the DOM</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="myHeading">JavaScript and the DOM</h1> <p>Making a web page interactive</p>
<p class="description">Things that are purple:</p> //added class here! <input type="text" class="description"> //added class here! <button class="description">Click me!</button> //added class here!

<ul>
  <li>grapes</li>
  <li>amethyst</li>
  <li>lavender</li>
  <li>plums</li>
</ul>
<script src="app.js"></script>

</body> </html>