title: Event listener not working in external file
body: <p>When my JavaScript code is on the same HTML page, event listener is working:</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-css lang-css prettyprint-override"><code>.dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  
  /* Dropdown button on hover &amp; focus */
  .dropbtn:hover, .dropbtn:focus {
      background-color: #3e8e41;
  }
  
  /* The container &lt;div&gt; - needed to position the dropdown content */
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;button id="dropBtn" class="dropbtn"&gt;Dropdown&lt;/button&gt;
       &lt;div id="myDropdown" class="dropdown-content"&gt;
         &lt;a href="#"&gt;Link 1&lt;/a&gt;
         &lt;a href="#"&gt;Link 2&lt;/a&gt;
         &lt;a href="#"&gt;Link 3&lt;/a&gt;
     &lt;/div&gt;
   &lt;/div&gt;
    
    &lt;script&gt;
      
    
    var dropdown = document.getElementById("dropBtn");
    
    function myFunction() {
         document.getElementById("myDropdown").classList.toggle("show");
    }
    
    dropdown.addEventListener("click", myFunction, false);
    
    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
    
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i &lt; dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
  
   
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when I put same javascript code into external JS file, the event listener is not working.</p>
  
  <p>I included JS file just before closing <code>&lt;/body&gt;</code> tag:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>How to make my event listener works from an external file, not just inside HTML page ? </p>