title: Why is JS working in localhost and not online?
body: <p>I'm working on a project where the menu takes the full page. I put everything in an include (from w3 includes: <a href="https://www.w3schools.com/howto/howto_html_include.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_html_include.asp</a>). It works well on localhost (I use python 3 on my computer) but not when I put it on my online server.</p>
  
  <p>The menu itself uses JS for when the user clicks anywhere on the page it closes the menu.</p>
  
  <p>This is my code</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>window.onload = function() {
    var input = document.getElementById('buttonOpen');
    var label = document.querySelector('label[for=buttonOpen]');
    document.addEventListener('click', function(e) {
      if (
        e.target !== input &amp;&amp;
        e.target !== label &amp;&amp;
        !(e.target.compareDocumentPosition(label) &amp; Node.DOCUMENT_POSITION_CONTAINS)
      ) {
        input.checked = false;
      }
      label.classList.toggle('change', input.checked);
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu {
    width: 100%;
    height: 100%;
    background: #1b1b1b;
    margin-left: -100%;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    position: fixed;
    z-index: 999;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  
  #buttonOpen:checked~#menu {
    margin-left: 0;
  }
  
  #buttonOpen {
    display: none;
  }
  
  #menuClosed #menu {
    margin-left: -100%;
  }
  
  .button-menu {
    display: inline-block;
    cursor: pointer;
    position: fixed;
    z-index: 1000;
    top: 2%;
    right: 2%;
  }
  
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: #fff;
  }
  
  .change .bar2 {
    opacity: 0;
  }
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: #fff;
  }
  
  #menu ul {
    width: 100%;
    float: left;
    list-style: none;
    font-size: 30px;
    line-height: 80px;
    padding: 0;
  }
  
  #menu a {
    display: inline-block;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
  }
  
  .menuSocial {
    padding-top: 0 !important;
  }
  
  .menuSocial li {
    font-size: 25px;
    display: inline;
    margin-left: 5%;
  }
  
  .menuSocial li:first-child {
    margin-left: -2.5%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="buttonOpen" type="checkbox" /&gt;
  &lt;label for="buttonOpen"&gt;
          &lt;div class="button-menu" onclick="openMenu(this)"&gt;
              &lt;div class="bar1"&gt;&lt;/div&gt;
              &lt;div class="bar2"&gt;&lt;/div&gt;
              &lt;div class="bar3"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/label&gt;
  
  &lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;ul class="menuSocial"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fas fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>