title: My Javascript doesn't work when I put a script element in the head to load it from a URL
body: <p>I have written the code for a simple function inline, but when i created a separate js.file it doesn't want to work for some reason. I've tried everything it feels like, but maybe my tired eyes can't something!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script type="text/javascript" src="menu.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
   &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;button name="one"&gt;Button 1&lt;/button&gt;
    &lt;p&gt;
      Lorem ipsum dolor sit amet
    &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;button name="two"&gt;Button 2&lt;/button&gt;
    &lt;p&gt;
      Lorem ipsum dolor sit amet
    &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;button name="three"&gt;Button 3&lt;/button&gt;
    &lt;p&gt;
      Lorem ipsum dolor sit amet
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>The idea is to have three buttons that when you click on one of them only one of the divs will be shown, and the other two will be hidden.</p>
  
  <p>Here is the JavaScript (that worked perfectly fine inline):</p>
  
  <pre><code>var first_container = document.querySelectorAll(' div:not(:first-child) p');
  
  for (var i = 0; i &lt; first_container.length; i++) {
    first_container[i].style.visibility = 'hidden';
  }
  var buttons = document.querySelectorAll('button');
  
  for (var i = 0; i &lt; buttons.length; i++) {
    buttons[i].addEventListener('click', clickHandler);
  }
  
  function clickHandler(e) {
  
    e.preventDefault();
  
    var text = document.querySelectorAll('p');
  
    for (var i = 0; i &lt; text.length; i++) {
  
        if (text[i] === event.target.nextElementSibling) {
            text[i].style.visibility = 'visible';
  
        } else {
            text[i].style.visibility = 'hidden';
        }
    }
  }
  </code></pre>