Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction The Event Object

Hide/Show button replaces HTML with one line of all text instead of what was there previously.

When I use the Hide/Show buttons, it replaces the text in the lower half to the webpage with one line of code.. I'm not sure what I can do to get it to show all the content as it was previously. It all goes to uppercase/lowercase when the mouse hovers over it, instead of each individual item. The snapshot is HTTP://w.trhou.se/j0e5uwzi1e

Can you explain what is wrong with my code?

A couple of things..

In index.html

  • Line 14: descripion -> description (missing a 't')

In app.js:

  • Line 8: removeItemButon -> removeItemButton (missing a 't')
  • Line 13: = -> === (you should compare the values, not assign)
  • Line 18: = -> === (you should compare the values, not assign)
  • Line 54: p is not defined (remove it and your code should work)

1 Answer

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 23,373 Points

Hi Jonathan,

I found a couple little things in your code that were causing some issues.

const removeItemButon = document.querySelector('button.removeItemButton');

The variable name above is missing the second "t" in removeItemButton.

In your If conditional statement to check for list items you want to use "==" not "=". The single "=" is the assignment operator. The "==" checks for equality.

Here is how the if statements should look:

  listDiv.addEventListener('mouseover', (event) => {
    if (event.target.tagName == 'LI'){
      event.target.textContent = event.target.textContent.toUpperCase()
    }});

  listDiv.addEventListener('mouseout', (event) => {
     if (event.target.tagName == 'LI'){
      event.target.textContent = event.target.textContent.toLowerCase()
     }});

Hope this helps and happy coding!