Javascript 分离HTML和JS

我试图分离一些嵌入到HTML文件中的JS代码。我没有这段代码，它是一个远程支持登录页，但我不知道如何将它们分开

我曾尝试将JS代码复制到另一个.JS文件中，然后将脚本标记添加到link中，但没有成功

<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;
}

输入会话代码并单击“连接”
会话代码
函数isl_connect（）{
var doc=文件，
f=doc.getElementById（'isl-connect-form'），
r=doc.getElementById（'isl-feedback'），
是_msie=navigator.userAgent.indexOf（'msie'）>=0，
b=零；
ISLOnline.Join.getSessionInfoByCode(
f、 代码值，
功能（信息）{
r、 className='isl success'；
r、 innerHTML='连接到会话'+
info.getAttribute（'sessionCode'）；
如果（是_msie）{
r、 innerHTML+=”，请单击下面的按钮：
；
r、 appendChild（doc.createElement（'br'））；
var b=doc.createElement（'input'）；
b、 类型='按钮'；
b、 名称='join'；
b、 值='Start'；
b、 onclick=函数（）{
info.join（）；
};
r、 儿童（b）；
}否则{
info.join（）；
}
},
函数（错误）{
r、 className='isl error'；
r、 innerHTML='无效的会话代码！'；
/*如果需要，请注释上面的行并取消注释下面的行
想
显示服务器发送的错误*/
//r、 innerHTML+=error.getDescription（）；
}
);
返回false；
}

---

创建一个新的JS文件，并将原始的完整javascript放在其中，然后在调用islonline.net API后加载它。我举了一个例子

<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>

---

这不管用？你有什么问题吗？我试过Kyle，但没有，当我点击提交按钮时，什么都没有happens@JHiggins，有些代码要求将其包含在页面上。我知道一些跟踪代码和类似的东西是这样的。尝试使用脚本标记，但将其移动到顶部，在已经存在的脚本标记下。@Kyle1323这是错误的。跟踪代码是不可移植的，这意味着它不能跨多个域应用，因为它是针对特定域硬编码的，但您仍然可以将其移动到单独的文件中，并通过

src

属性将其包括在内，只要您遵循HTML结构中放置

标记的建议（例如，在

结尾或

中等）@PatrickRoberts为指出这一点而欢呼，我也许应该读一下代码：（因为这是关于“分离HTML和JS”，您介意我编辑您的答案以使用

addEventListener（）吗）

而不是

onsubmit

属性？@PatrickRoberts一点也不，让答案更好，以备将来参考。@PatrickRoberts我希望你已经将答案和你的更正重新发布。这确实是你现在的工作，而且做得更好。不，这是拙劣的礼节，复制别人的答案只是为了对其进行编辑，这就是我提出的原因对您的进行编辑。

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;
});