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

Posted by Khadar Abdulahi
Khadar Abdulahi
1,955 Points

Click event not working on menu

The Click event not working on menu where its shows no error on the console but it doesn't preform its task https://w.trhou.se/jxaslazq23

1 Answer

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Khadar,

I've seen your JavaScript code and I think the issue is the specificity of the element that you are selecting.

The code below is selecting the <div> and not the <li> element for your navigation. 

const nav =document.querySelector('#main_menu');

I think the fix here is to select all the <li> when you instantiate the variable nav or having a and if else statement with an event that clicked an LI element inside that #main_menu.

Like this:

menu.addEventListener("click", (e)=>{
   if(e.target.tagName === 'LI')
     const navItem = e.target;
     if(navItem.display=='block'){
        navItem.display='none';
    }
     else{
         navItem.display='block';
     }
   } 
});

Hope this helps!

Khadar Abdulahi
Khadar Abdulahi
1,955 Points

I kinda don't get because the element i selected is the nav and my goal is to hide and show the entire nav which includes the list items, i tired to hide the menu using display:none on the css to the nav and it works but kinda confuse as to why it is not doing the same thing to the function if the problem is that i selected the nav not whats inside it which is the list items.

plus it didn't work and it doesn't show any errors