title: Javascript external file not working as excepted
body: <p>I have been trying to make a article filter at the moment i can only seem to get it to work with internal javascript but i need to have it as a external javascript. </p>
  
  <p>How do i do this? </p>
  
  <p>When i add the javascript to an external file it doesn't show everything straight off and the active button doesn't work. I think it's that im not doing everything i should be in the javascript for it to work.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- MAIN (Center website) --&gt;
  &lt;div class="main"&gt;
  
  &lt;div id="myBtnContainer"&gt;
    &lt;button class="btn active" onclick="filterSelection('all')"&gt; Show all&lt;/button&gt;
    &lt;button class="btn" onclick="filterSelection('art')"&gt; Art&lt;/button&gt;
    &lt;button class="btn" onclick="filterSelection('design')"&gt; Design&lt;/button&gt;
    &lt;button class="btn" onclick="filterSelection('photography')"&gt; Photography&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- Portfolio Gallery Grid --&gt;
  &lt;div class="row"&gt;
    &lt;div class="column art"&gt;
      &lt;div class="content"&gt;
        &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Art&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column photography"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Photography&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column art"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Art&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="column design"&gt;
      &lt;div class="content"&gt;
        &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Design&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column art"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Art&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column art"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Art&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column design"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Design&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column photography"&gt;
      &lt;div class="content"&gt;
        &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Photography&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column photography"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Photography&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column art"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Art&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;div class="column design"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Design&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;div class="column art"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Art&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
      &lt;div class="column photography"&gt;
      &lt;div class="content"&gt;
      &lt;img src="" alt="" style="width:100%"&gt;
        &lt;h4&gt;Photography&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;!-- END GRID --&gt;
  &lt;/div&gt;
  
  &lt;!-- END MAIN --&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  filterSelection("all")
  function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i &lt; x.length; i++) {
      w3RemoveClass(x[i], "show");
      if (x[i].className.indexOf(c) &gt; -1) w3AddClass(x[i], "show");
    }
  }
  
  function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i &lt; arr2.length; i++) {
      if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
    }
  }
  
  function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i &lt; arr2.length; i++) {
      while (arr1.indexOf(arr2[i]) &gt; -1) {
        arr1.splice(arr1.indexOf(arr2[i]), 1);     
      }
    }
    element.className = arr1.join(" ");
  }
  
  
  // Add active class to the current button (highlight it)
  var btnContainer = document.getElementById("myBtnContainer");
  var btns = btnContainer.getElementsByClassName("btn");
  for (var i = 0; i &lt; btns.length; i++) {
    btns[i].addEventListener("click", function(){
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>