Moving inline Javascript to external .js file

Question

I have some inline Javascript in my <body> that I'm trying to export to a .js file. I know that normally you would just copy/paste it over, sometimes including it in a document ready function, but something about this one is different. I'm not super fluent in JS and the code wasn't written by me (but was provided free online).

This is how the code is in my file. If you need any more info just ask!

<body>
    <script>
    (function (window, document) {
    var menu = document.getElementById('menu')
        , WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';

    function toggleHorizontal() {
    [].forEach.call(document.getElementById('menu').querySelectorAll('.custom-can-transform'), function (el) {
            el.classList.toggle('pure-menu-horizontal');
        });
    };

    function toggleMenu() {
        // set timeout so that the panel has a chance to roll up
        // before the menu switches states
        if (menu.classList.contains('open')) {
            setTimeout(toggleHorizontal, 500);
        }
        else {
            toggleHorizontal();
        }
        menu.classList.toggle('open');
        document.getElementById('toggle').classList.toggle('x');
    };

    function closeMenu() {
        if (menu.classList.contains('open')) {
            toggleMenu();
        }
    }
    document.getElementById('toggle').addEventListener('click', function (e) {
        toggleMenu();
        e.preventDefault();
    });
    window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
    })(this, this.document);

    </script>
</body>

UPDATE: I was able to wrap the script in a scope (foo = function() {}) and get it to work externally by adding window.onload = function to the HTML page. This was suggested by @marmeladze and worked.

Is it not working when you migrate it to another file? What error are you getting? — mindOfAi
– mindOfAi, Commented Feb 1, 2017 at 5:35
fix the syntax (one of them: should put semicolon after menu declaration), then, move them in a file and call it just over the closing body tag, or again inside a file, wrap all in a scope (e.g. foo = function() { /* rest of your code */ } ) and call with window.onload = foo. and place anywhere. — marmeladze
– marmeladze, Commented Feb 1, 2017 at 5:39
@marmeladze I did what you said by wrapping it in a scope and calling it with window.onload = foo and it worked. However, now I'm running into another issue. The code that I need the js to actually affect is being included through Angular and it would appear that js doesn't like that very much. — zaviiox
– zaviiox, Commented Feb 1, 2017 at 17:55
i've zero knowledge about angular. please let me research a bit. during that time, you sohuld better add angular tag and update question describing your actual problem/issue. — marmeladze
– marmeladze, Commented Feb 1, 2017 at 22:24

zaviiox · Accepted Answer · 2017-02-02 04:47:48Z

1

As suggested by @marmeladze, I was able to wrap the script in a scope (foo = function() {}) and get it to work externally by adding window.onload = function to the HTML page.

answered Feb 2, 2017 at 4:47

zaviiox

331 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2017-02-01 05:41:45Z

0

So what is the real problem to export it in an external js file?

As always i would copy and past code in a new js. Link it to HTML page and write functions that i need as attribute of HTML's tag (ex. "onload=functioname();" in body's tag). As marmeladze said you can wrap all in an unique scope so you can call it in body.

Maybe you are doing it so if you maybe can explain better your problem would be great.

answered Feb 1, 2017 at 5:41

Mike

1442 silver badges8 bronze badges

Collectives™ on Stack Overflow

Moving inline Javascript to external .js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related