Separating HTML and JS

Question

I am trying to separate some JS code that is embedded in to a HTML file. I do not own this code, it is for a remote support landing page but I'm not sure how to separate them out.

I have tried copying the JS code in to a different .js file and then adding the script tags to link but no luck.

<script type="text/javascript" src="https://www.islonline.net/webapi/api.js?
libs=join"></script>
<div class="isl-connect-form">
<form id="isl-connect-form" action="#" method="get" onsubmit="return 
isl_connect();">
    <fieldset>
        <legend>Enter your session code and click Connect</legend>
        <div>
            <label for="isl-code-field">Session code</label>
            <input type="text" name="code" id="isl-code-field" value="" />
        </div>
        <input type="submit" name="submit" value="Connect" />
    </fieldset>
</form>
<div id="isl-feedback"></div>
</div>

<script type="text/javascript">
function isl_connect() {
    var doc = document,
        f = doc.getElementById('isl-connect-form'),
        r = doc.getElementById('isl-feedback'),
        is_msie = navigator.userAgent.indexOf('MSIE') >= 0,
        b = null;

    ISLOnline.Join.getSessionInfoByCode(
        f.code.value,
        function (info) {
            r.className = 'isl-success';
            r.innerHTML = 'Connecting to session ' + 
info.getAttribute('sessionCode');
            if (is_msie) {
                r.innerHTML += ', please click the button below:<br />';
                r.appendChild(doc.createElement('br'));
                var b = doc.createElement('input');
                b.type = 'button';
                b.name = 'join';
                b.value = 'Start';
                b.onclick = function () {
                    info.join();
                };
                r.appendChild(b);
            } else {
                info.join();
            }
        },
        function (error) {
            r.className = 'isl-error';
            r.innerHTML = 'Invalid session code!';
            /* comment the line above and uncomment the line below if you 
 wish to
                display the error that is sent by the server */
            //r.innerHTML += error.getDescription();
        }
    );
    return false;
}

I tried that Kyle but no, when I click on the Submit button, nothing happens — J Higgins, Jun 23 '17 at 13:24
@JHiggins, some code requires that it be included right on the page. I know some tracking codes and things similar are like that. Try using a script tag but moving it to the top, under the script tag that is already there. — sk03, Jun 23 '17 at 13:25
@Kyle1323 that's false. Tracking code is non-portable, meaning it can't be applied across multiple domains since it's hard-coded for a specific domain, but you can still move it into a separate file and include it via `src` attribute, as long as you follow recommendations for placement of the ` — Patrick Roberts, Jun 23 '17 at 13:30
Possible duplicate of [How to use external ".js" files](https://stackoverflow.com/questions/11498068/how-to-use-external-js-files) — Patrick Roberts, Jun 23 '17 at 13:33

score 3 · Answer 1 · edited Jun 23 '17 at 13:47

Create a new JS file and put the original full javascript within it then load it after the islonline.net API call. I have shown an example.

<script type="text/javascript" src="https://www.islonline.net/webapi/api.js?libs=join"></script>
<div class="isl-connect-form">
  <form id="isl-connect-form">
    <fieldset>
      <legend>Enter your session code and click Connect</legend>
      <div>
        <label for="isl-code-field">Session code</label>
        <input type="text" name="code" id="isl-code-field" value="" />
      </div>
      <input type="submit" name="submit" value="Connect" />
    </fieldset>
  </form>
  <div id="isl-feedback"></div>
</div>
<!-- your new external JS file -->
<script type="text/javascript" src="https://www.example.com/path/to/your/file.js"></script>

Your new Javascript file will contain the original JS code, with a slight modification to help separate HTML and JavaScript by using addEventListener instead of onsubmit:

document.getElementById('isl-connect-form').addEventListener('submit', function isl_connect(event) {
    if (typeof event.preventDefault == 'function') event.preventDefault();

    var doc = document,
        f = this,
        r = doc.getElementById('isl-feedback'),
        is_msie = navigator.userAgent.indexOf('MSIE') >= 0,
        b = null;

    ISLOnline.Join.getSessionInfoByCode(
        f.code.value,
        function (info) {
            r.className = 'isl-success';
            r.innerHTML = 'Connecting to session ' + 
info.getAttribute('sessionCode');
            if (is_msie) {
                r.innerHTML += ', please click the button below:<br />';
                r.appendChild(doc.createElement('br'));
                var b = doc.createElement('input');
                b.type = 'button';
                b.name = 'join';
                b.value = 'Start';
                b.onclick = function () {
                    info.join();
                };
                r.appendChild(b);
            } else {
                info.join();
            }
        },
        function (error) {
            r.className = 'isl-error';
            r.innerHTML = 'Invalid session code!';
            /* comment the line above and uncomment the line below if you wish to
             * display the error that is sent by the server
             */
            //r.innerHTML += error.getDescription();
        }
    );
    return false;
});

@PatrickRoberts Cheers for pointing it out, I maybe should have read the code :( — Andy Donegan, Jun 23 '17 at 13:38
Since this is about "Separating HTML and JS", do you mind if I edit your answer to use `addEventListener()` instead of `onsubmit` attribute? — Patrick Roberts, Jun 23 '17 at 13:38
@PatrickRoberts not at all, makes Answer better for future reference. — Andy Donegan, Jun 23 '17 at 13:39
@PatrickRoberts I wish you had re-posted the answer with your corrections. This is really your work now and much better for it. — Andy Donegan, Jun 23 '17 at 14:07
Nah that's poor etiquette copying someone else's answer only to make edits on it, that's why I offered to make the edits on yours. — Patrick Roberts, Jun 23 '17 at 14:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147469/discussion-between-andy-donegan-and-patrick-roberts). — Andy Donegan, Jun 23 '17 at 14:12

Separating HTML and JS

1 Answers1