title: How do I use multiple functions in one JS file
body: <p>Sometime ago a Web designer showed me how to organise my functions on one JS file. However, I am having trouble getting it to work. There are no errors on the page but the functions don't seem to run?</p>
  
  <p>The idea is, if the item (Class) is in the HTML I run the JQuery function which is in my functions.js, if not, no need to do anything. I have created a CodePen so people can take a look.</p>
  
  <p>Any help welcome :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
    var siteScripts = {
      /*
       * function onReady
       */
      onReady: function() {
        this.boxOne();
        this.boxTwo();
      },
      
      boxOne: function() {
        if ($('.box-one').length) {
          $('.box-one p').html('Canary One');
        }
      },
  
      boxTwo: function() {
        if ($('.box-two').length) {
          $('.box-two p').html('Canary Two');
        }
      }
    };
  
    $().ready(function() {
      //jQuery.noConflict();
      siteScripts.onReady();
    });
  
    function makeShort() {
  
    }
  })(jQuery);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Hello World&lt;/h1&gt;
  
  &lt;div class="box-one"&gt;
      &lt;p&gt;I love my canary&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="box-two"&gt;
      &lt;p&gt;I love my canary&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;input type="button" id="test" value="Submit"&gt;
  
  &lt;!-- jQuery  --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>