JavaScript JavaScript and the DOM 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 21,829 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!