JS functions to remove two different classes interfering with one another

Question

I have two JS functions:

function myFunctionMenu() {
  document.getElementById("main-menu").classList.toggle("shows");
}

and

function expandFunction() {
  document.getElementById("menu-button").classList.toggle("expand");
}

Both of which toggle classes. Those classes have styles:

.shows {
  margin-right: auto;
  margin-left: auto;
  display: block;
  transition: all 2s ease;
}

and

.expand {
  padding: 1% 20%;
  background-color: #8c8c8c;
}

I then have two more functions, one for each of those original functions, which removes that class when clicking outside of the button that initiates both functions:

window.onclick = function(event) {
  if (!event.target.matches('#menu-button')) {

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

and

window.onclick = function(event) {
    if (!event.target.matches('#menu-button')) {

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

The HTML follows, just in case:

<!doctype html>

<head>

  <title>Site Photos</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="Styles/new-menu.css">
  <script type="text/javascript" src="script/menu-scripts.js"></script>

</head>

<body>
  <br>
  <h1>
   Name <br>
  </h1>
  <h2>
 Site Photos
  </h2>

  <!--Menu-->
  <div class="menu-container" div style="margin-left:auto; margin right:auto; margin-top:5%; margin-bottom:auto; width:40%;">
  
  <!-- Main Menu Button -->
  <div id="main-button-container" style="text-align:center; margin-top:-8%;">
    <button onclick="myFunctionMenu();expandFunction()" class="dropbtn" id="menu-button"> Menu </button>
  </div>
 
<hr>
<!-- Main Menu Container -->
 <div id="main-menu" class="house-menu">
  <a href="main-house.html"> Main House </a><hr>
  <a href="car-barn-main.html"> Car Barn </a><hr>
  <a href="utility-building.html"> Utility Building </a><hr>
  <a href="under-construction.html"> Central Plant </a><hr>
  <a href="exteriors-and-siteworks.html">Exteriors</a><hr>
 </div>
<hr>
 
  </div>
</body>
</html>

The problem I am having is that I can only run one of the two "remove when click outside the button" functions at a time.

Can anyone explain to me why?

Thank you.

Think about it, every time you do `window.onclick = ...` you're assigning a new value, effectively overwriting what was previously there. — adeneo, Aug 16 '17 at 21:54
@adeneo :_)) I just prepared an answer :_)) You should not assign two values to onclick for window plus do this: `` — Hossein, Aug 16 '17 at 22:23
It is not a duplicate of that question. My button calls two functions which both work. — OddlySpecific, Aug 16 '17 at 22:23
@JasonVickersadVANture_time Change your script to above comment and styles to this: `` you have typos all over your code too check for them in style attributes — Hossein, Aug 16 '17 at 22:25
This seems to be an exact duplicate, the issue is assigning to `window.onclick` twice, which can't be done, and the accepted answer adresses that issue. — adeneo, Aug 17 '17 at 10:01

Jonathan · Accepted Answer · 2017-08-16T22:08:11.397

Because the first window.onclick will get overridden by the second one. Just like writing var a = 1; and later var a = 2;. You should use document.addEventListener for this purpose:

document.addEventListener("click", function(e){
  if (!e.target.matches('#menu-button')) {
    var dropdowns = document.getElementsByClassName("house-menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('shows')) {
        openDropdown.classList.remove('shows');
      }
    }
  }
});

and

document.addEventListener("click", function(e){
  if (!e.target.matches('#menu-button')) {

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

This is the answer I was looking for. – OddlySpecific Aug 16 '17 at 22:29 — OddlySpecific, Aug 16 '17 at 22:29

JS functions to remove two different classes interfering with one another

1 Answers1