Can't seem to get the addEventListener to work

Question

I'm currently stuck, as I can't seem to get the addEventListener to work.

I've tried the Dev. Tools with break points on addEventListener but they don't stop the script, so I guess there is something wrong with the code detecting the click and mouseleave and mouseenter

 function hide() { document.getElementById("links").style.display = "none"; }; function show() { document.getElementById("links").style.display = "flex"; }; var menu = document.getElementById("menu"); menu.addEventListener("mouseenter", show); menu.addEventListener("mouseleave", hide); menu.addEventListener("click", show); document.addEventListener("click", function() { if (this != menu) { document.getElementById("links").style.display = "none"; } });

 #menu { height: 10vh; background-color: red; text-align: center; transition: all 1s ease-out; padding-top: 5vh; } #menu:hover { color: red; } #envelope { height: 0; display: block; background-color: blue; min-width: 100%; z-index: 1; position: absolute; left: 0; content: ""; opacity: 0; transition: all 1.3s ease-out; } #links { height: 0; display: none; background-color: pink; justify-content: center; z-index: 2; min-width: 100%; opacity: 0; transition: all 1s ease-in; } #google { margin-top: -1vh; width: 150px; } #mysite { padding-left: 5%; margin-top: -1vh; width: 150px; } #menu:hover #links { opacity: 1; height: 100px; } #menu:focus #links { opacity: 1; height: 100px; } #menu:hover #envelope { height: 100px; opacity: 1; } #menu:focus #envelope { height: 100px; opacity: 1; }

 <div id="menu">Click here to browse the internet. <div id="envelope"> <div id="links"> <div> <a href="https://www.google.com"><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a> </div> <div style="width: 20%;"></div> <div> <a href="https://www.mywebsite.com/si/"><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png" /></a> </div> </div> </div> </div>

Answer 1

In your snippet, addEventListener is working, but it looks like the code is not producing the behavior you want or expect. You don't seem to be accounting for the way events propagate through the DOM.

You can read about that here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

You probably want something like the following:

document.addEventListener("click", function (event) {
    event.stopPropagation();
    console.log("clicked", event.target, this);
    if (event.target != menu) {
        /* something else was clicked */
    } else {
        /* the menu was clicked */
    }
});

Note that the click handler is naming an argument, called "event." Then we use event.stopPropagation() and look at event.target rather than this .

I've also added a console.log statement so you can see the difference between the this keyword and the value of event.target .

Answer 2

You are almost there, a few modifications needed are,

In css , you are making opacity: 0 for two elements #envelope and also #links which you could change the envelope to opacity: 1 itself.

In JS , this line executes successfully,

document.getElementById("links").style.display = "flex";

But as already the css for #links is opacity: 0 , it is not displaying so you need to make opacity: 1 as well along with display:flex via JS..

So the code inside show() function, should be,

function show (){
    document.getElementById("links").style.display = "flex";
    document.getElementById("links").style.opacity = "1";
};

And the snippet as follows,

 function hide (){ document.getElementById("links").style.display = "none"; }; function show (){ document.getElementById("links").style.display = "flex"; document.getElementById("links").style.opacity = "1"; }; var menu = document.getElementById("menu"); menu.addEventListener("mouseenter", show); menu.addEventListener("mouseleave", hide); menu.addEventListener("click", show); document.addEventListener("click", function (){ console.log(this != menu); if (this != menu){ document.getElementById("links").style.display="none"; } });

 #menu{ height: 10vh; background-color: red; text-align: center; transition: all 1s ease-out; padding-top: 5vh; } #menu:hover{ color: red; } #envelope{ height: 0; display: block; background-color: blue; min-width: 100%; z-index: 1; position: absolute; left: 0; content: ""; opacity: 1; transition: all 1.3s ease-out; } #links{ height: 0; display: none; background-color: pink; justify-content: center; z-index: 2; min-width: 100%; opacity: 0; transition: all 1s ease-in; } #google{ margin-top: -1vh; width: 150px; } #mysite{ padding-left: 5%; margin-top: -1vh; width: 150px; }

 <div id="menu">Click here to browse the internet. <div id="envelope"> <div id="links" > <div><a href="https://www.google.com"><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a></div> <div style="width: 20%;"></div> <div><a href="https://www.mywebsite.com/si/"><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></a></div> </div> </div> </div>