title: Accessing window.App functions in Javascript
body: <h3>The Problem</h3>
  <p>I have a pre-made js file (which I don't completely understand) that is being imported to my html page.  This js file defines a function that I would like to be able to call through script blocks in the html page itself.</p>
  <p>The function I would like to call is <code>app.openNav</code>.  I have tried using a variety of different methods to call this function (<code>window.App.app.openNav</code>, <code>App.app.openNav</code>, <code>App.openNav</code>, <code>app.openNav</code>, even <code>window.openNav</code>) to no avail.</p>
  <p>My failure to call the function through these methods made me think that perhaps I needed to define it outside of the top function (make it global?).  I tried doing that by saying <code>app.openNav = {};</code> but that did not work either.</p>
  <p>This is in <em>nav.js</em>:</p>
  <pre class="lang-js prettyprint-override"><code>(function(window, document, undefined)
  {
      window.App = (function()
      {    
          var app = { };
  
          app.init = function()
          {
              app.openNav = function()
              {
                  //open navigation
              };
  
              // open nav with button
              document.getElementById('foo').addEventListener('click',app.openNav,false);
          };
          return app;
      })();
      if (window.addEventListener) {
          window.addEventListener('DOMContentLoaded', window.App.init, false);
      }
  })(window, window.document);
  </code></pre>
  <p>As you can see, I currently have a method of calling <code>app.openNav</code> from inside <em>nav.js</em> by using <code>addEventListener</code> on an html object.  However, I am using an external library (<a href="http://eightmedia.github.io/hammer.js/" rel="nofollow noreferrer">hammer.js</a>) to interpret events which I want to use to open the navigation.</p>
  <h3>Questions</h3>
  <p>Is it possible to call the <code>app.openNav</code> function from outside <em>nav.js</em>?<br />
  If so, how would I go about doing that?</p>