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) Responding to User Interaction The Event Object

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

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?

Jonathan Hermansen
Jonathan Hermansen
25,935 Points

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 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 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!