javascript - Can't access JQuery or Foundation functions from separate file? -

basically, problem this: have code adds event listener each button on page. if login cookie not set, code triggers foundation modal using foundation-provided function. if cookie set , user logged in, user directed desired page.

the problem is, can't seem fire foundation code file, though foundation files being included in same page; else working. what's going on? here's code:

// anonymous function wrapper (function () {     // getting array of buttons on page, based on button class     var button = document.getelementsbyclassname('button');      // main function run after ternary operator check (found @ bottom)     function run () {         // cookiecheck() returns true/false depending on whether          // cookie set         var cookie = cookiecheck(),             modal = document.getelementbyid('loginmodal'),             i, j = button.length;          // looping through each button, applying listener         (i = 0; < j; ++i) {             (function (i) {                 button[i].addeventlistener('click', function (e) {                     var link = e.target.getattribute('target');                     if (cookie === false) {                         // firing foundation function. problem here!!!                         $('#mymodal').foundation('reveal', 'open');                     } else {                         // if cookie set, direct user proper page                         e.target.href = link;                     }                 }, false);             }(i));         }     }      // if buttons exist on page, function runs.     // prevents errors being thrown in console on pages no buttons     button ? run() : false; }()); 

html (i didn't write part, or php, did javascript here):

<?php wp_footer(); ?>      <div id="loginmodal" class="reveal-modal small" data-reveal>         <?php gravity_form( 2, true, true, false, '', false ); ?>     <a class="close-reveal-modal">&#215;</a></div>      <script>         (function($) {             $(document).foundation();         })(jquery);     </script>      <!-- script in question /-->     <script src="/static/themes/rwv3/js/custom.js"></script>     <?php if (is_front_page()) { ?>         <script src="/static/themes/rwv3/js/vendor/main.js"></script>     <?php } ?> </body> 

why happening?

thanks