Close function when clicking outside the element

Asked

Viewed 361 times

1

I have a problem in script below, the function myFunction and myFunction1 normally open the dropdown by clicking the button, but in the click-out and close part, only the second event is working.

<script>
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    function myFunction1() {
        document.getElementById("myDropdown1").classList.toggle("show");
    }

    // Fechar ao clicar fora - ESSE NÃO FUNCIONA SE ADICIONAR O DE BAIXO
    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');
          }
        }
      }
    }

    // Fechar ao clicar fora - ESSE FUNCIONA, MAS O DE CIMA NÃO
    window.onclick = function(event) {
      if (!event.target.matches('.btn-header')) {

        var dropdowns = document.getElementsByClassName("dropdown-content2");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>
javascript
  • 1

    Why do you overwrite the window.onclick when you enter the second function. Why not treat everything in the same event?

  • I tried to put everything into the same event but it didn’t work the same way.

  • You can show how you did it?

  • I took out the second event, took his IF and put it together with the first.

  • So it should work.

  • Have you tried placing console.log(Event) inside the window.onclick = Function(Event) { to see if something appears on the console? or even inside the if to see if it is entering

  • Putz worked, was calling another 'show'. Thanks for the tip

Show 2 more comments

1 answer

1


Just turning the comment into a response. The problem with your code is assigning the event twice window.onclick, so the second assignment overwrites the first. It’s similar when you do x = 1 and right after x = 2. The value of x will be 2 and the value 1 will be lost. To get around the problem, just do the checks within the same function:

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

  if (!event.target.matches('.btn-header')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

}

This way the two checks will be executed in the event click.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.