title: Excluding an additional id from Javascript function
body: <p>Is it possible to add an id to this code, so that it doesn´t trigger when the desired container itself (mobile-navigation) is clicked PLUS an additional id (hamburger-menu-div). I have a button to trigger the navigation (hamburger-menu-div). It toggles a class. So when I click that specific button, this code should do nothing... Is that possible or do I have a thinking error here?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Actual code and working but how to insert an additional id to avoid triggering it also on that id
  
  document.addEventListener('mouseup', function(e) {
    var container = document.getElementById('mobile-navigation');
    if (!container.contains(e.target)) {
      container.style.display = 'none';
    }
  });
  
  //Changed to this code to select multiple ids but not working
  
  document.addEventListener('mouseup', function(e) {
    var container = document.querySelectorAll('mobile-navigation, hamburger-menu-div');
    if (!container.contains(e.target)) {
      container.style.display = 'none';
    }
  });</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks for your support!</p>
  <p>EDIT: PLACING IN SOME MORE CODE FOR BETTER UNDERSTANDING:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Toggle nav menu to show and hide
  
  document.getElementById("hamburger-menu-div").addEventListener("click", function() {
    var x = document.getElementById("mobile-navigation");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  });
  
  
  //Hide it when clicked outside
  
  var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
  document.addEventListener('mouseup', function(e) {
    console.log(e.target);
    var set = 0;
    for (var i = 0; i &lt; container.length; i++) {
      if (e.target == container[i]) {
        set = 1;
      }
    }
    if (set === 0) {
      container[1].style.display = 'none';
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hamburger-menu-div {
    background-color: lightblue;
    width: 250px;
    height: 50px;
  }
  
  .mobile-navigation {
    background-color: lightgreen;
    width: 250px;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hamburger-menu-div" class="hamburger-menu-div"&gt;
    BUTTON
  &lt;/div&gt;
  
  
  &lt;div id="mobile-navigation" class="mobile-navigation"&gt;
    &lt;p&gt;- Navigationpoint 1&lt;/p&gt;
    &lt;p&gt;- Navigationpoint 2&lt;/p&gt;
    &lt;p&gt;- Navigationpoint 3&lt;/p&gt;
    &lt;p&gt;- Navigationpoint 4&lt;/p&gt;
    &lt;p&gt;- Navigationpoint 5&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>