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

Posted by Kwame Afrifa Obeng -Ofori
Kwame Afrifa Obeng -Ofori
2,238 Points

my code isnt working

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

<input type = "text" class = "description">

<button class = "desription>Change list description</button>



  <ul>
  <li>grapes</li>
  <li>amethyst</li>
  <li>lavender</li>
  <li>plums</li>
</ul>


<script src="app.js"></script>

</body> </html>

const input = document.querySelector('input'); const p = document.querySelector('p.description'); const button = document.querySelector('button'); button.addEventListener( 'click', () => { p.textContent = input.value + ';'; });

1 Answer

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Hey Kwame,

It looks like the error is actually coming from your HTML. Take a look at your button element:

<button class = "desription>Change list description</button>

The class is misspelled and there isn't a set of quotes to close off the class name. The spelling doesn't actually matter in this instance since it's not being used yet, but the quotes do -- the next quotes in the document are found much later, so everything in between them has been interpreted as the class name. If you open developer tools and view the class for the button you'll see this:

desription>Change list description</button>↵↵↵↵ <ul>↵ <li>grapes</li>↵ <li>amethyst</li>↵ <li>lavender</li>↵ <li>plums</li>↵</ul>↵↵↵<script src=

Closing the quotes around your class name should get things working as expected. It's worth correcting the spelling as well, just in case that class gets used later. Hope this helps!