title: Can't put script inside jQuery
body: <p>Hello I have a script like this</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() { 
  
        // TODO: Make class toggle logic more efficient
  
        // Global variables
        var maxChoiceCount = 2;
  
        // DOM elements
        var choiceItems   = document.querySelectorAll(".boxParent li");
        var maxCountLabel = document.getElementById("max-count");
  
        // Update max count label
        maxCountLabel.textContent = maxChoiceCount;
  
        // Checklist item handler
        var checkItem = function() {
          activeItems = document.querySelectorAll(".boxParent li.active");
  
          if (activeItems.length === maxChoiceCount) {
            if (this.className === "active") {
              this.className = "";
            }
          } else {
            if (this.className === "active") {
              this.className = "";
            } else {
              this.className = "active";
            }
          }
        }
  
        // Handle logic to enforce max count
        for (var i = 0, l = choiceItems.length; i &lt; l; ++i) {
          choiceItems[i].onclick = checkItem
        }
      });
  </code></pre>
  
  <p>The function just for give a sign for a selected <code>&lt;li&gt;</code>.
  I put this script inside index.js and I call it on my html page like this:</p>
  
  <pre><code>&lt;script src="js/index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and it didn't work, it got error in console and said like this:</p>
  
  <p><code>**index.js:22 Uncaught ReferenceError: activeItems is not defined**</code></p>
  
  <p>but when I copy the script and put inside the html, it work fine.</p>
  
  <p>Why cant I store it on my <code>index.js</code>?</p>
  
  <p>I don't like to put many script inside my html.</p>
  
  <p><strong>Here is the fiddle.</strong>
  <a href="https://jsfiddle.net/ddnvraf8/" rel="nofollow">https://jsfiddle.net/ddnvraf8/</a></p>