Sergi Khizanishvili Sergi Khizanishvili - 3 months ago 16
Javascript Question

Can't find out why javascript code does not work

I have two JS codes on my page:

Small Dropdown menu which uses this script:

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}


and a modal box (popup window that is displayed on top page) which uses next script:

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}


Problem:

Everything is working perfectly except one thing: In the first code where script is used for the Dropdown menu there is code which is used to close menu when you click outside of it. But when I'm using both scripts on one page above mentioned thing does not work. (To be clear: When I use Dropdown JS on another page where I don't have second script, everything works perfect).

Can you help find out what may cause the problem?

Answer

Use document.body.addEventListener('click') instead of window.onclick. Like so:

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
document.body.addEventListener('click', function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
});

and

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
document.body.addEventListener('click', function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
});
Comments