Toggle script problems how can I fix this in pure JavaScript? No jQuery

Question

I have made this script and I design it in a way when you click any where outside of the div the div should disappear but I notice that when you click on the div it self it disappear as well. How can I prevent that from occurring I only want it to work by clicking any where out side the div to make the div disappear not by clicking on the div to make it disappear as well. So i'm trying to prevent that. How can I do that? And I still want the toggle affect on the button as well.

document.addEventListener('DOMContentLoaded', function() {

  var bx = document.getElementsByTagName('button')[0];
  bx.addEventListener('click', fx);

  function fx() {
    document.getElementById("myDropdown").classList.toggle("show");
  }

  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');
        }
      }
    }
  }
});

.dropdown-content {
  display: none;
}

.show {
  display: block;
}

<button class="dropbtn">Dropdown</button>

<div id="myDropdown" class="dropdown-content">
  <h1>hello</h1>
  <img src='http://full.creative.touchtalent.com/The-enchanted-forest-97329.jpg'>
</div>

AuxTaco · Accepted Answer · 2018-01-23 20:09:02Z

1

Your window.onclick handler only checks to see if you clicked the button, not inside the <div>. Include the <div> check in your condition:

if (!event.target.matches('.dropbtn') && !event.target.closest('.dropdown-content')) {

Element.closest returns null if the element does not match and is not a descendant of an element that matches its argument.

answered Jan 23, 2018 at 20:09

AuxTaco

5,2011 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user9258655 Over a year ago

Thank you so much it works now how I want it to work :)

Collectives™ on Stack Overflow

Toggle script problems how can I fix this in pure JavaScript? No jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related