如何使用外部“.js”文件答案

【问题标题】：How to use external ".js" files如何使用外部“.js”文件
【发布时间】：2012-07-14 22:22:35
【问题描述】：

我有以下两个javascript函数：

1

showCountry()

2

showUser()

我想把它们放在外部的“.js”文件中

1

<a href="javascript:showCountry('countryCode')">countryCode</a>

2

<form>
 <select name="users" onChange="showUser(this.value)">
 <option value="1">Tom</option>
 <option value="2">Bob</option>
 <option value="3">Joe</option>
 </select>
</form>

调用这些函数的正确语法是什么？

【问题讨论】：

创建一个单独的 js 文件，在其中放置这些函数或您要编写的任何代码，并在您的脚本标签中提及 src，例如 <script type='text/javascript' language='javascript' src='Path to your external js file'/>。
你应该在调用函数之前加载外部js文件。
document.getElementById('users').addEventListener('change', showUser, false); 在单独的 JavaScript 文件中会比 onchange 更好。
注意：指向外部脚本文件的确切位置，您将在其中编写脚本。 w3schools.com - HTML <script> src Attribute
我知道这是一篇旧帖子（5 年以上），但作为谷歌的顶级结果，我认为有必要添加它。根据 W3Schools，您在通常编写脚本的地方引用脚本，根据其他人的说法，您在头中引用它，但这可能会导致问题。我已经阅读并发现在正文结束标记之前引用文档底部的外部脚本非常有用。这允许在运行任何脚本之前加载正文的全部内容，从而防止脚本在尚未“存在”的元素上运行。

标签： javascript html

【解决方案1】：

在你的头部元素中添加

<script type="text/javascript" src="myscript.js"></script>

【讨论】：

.. 否则您的 html 文件中的用法不变。但是，您可以更改为“不显眼的 javascript”样式 - 在脚本中将功能附加到您的 html，而不是在您的 html 中内联。 en.wikipedia.org/wiki/Unobtrusive_JavaScript

【解决方案2】：

这样的代码

 <html>
    <head>
          <script type="text/javascript" src="path/to/script.js"></script>
          <!--other script and also external css included over here-->
    </head>
    <body>
        <form>
            <select name="users" onChange="showUser(this.value)">
               <option value="1">Tom</option>
               <option value="2">Bob</option>
               <option value="3">Joe</option>
            </select>
        </form>
    </body>
    </html>

希望对你有帮助.... 谢谢

【讨论】：

谢谢大家回复我。感谢 Jalpesh Patel 提供快速有效的解决方案。
现在可能改变了，但我把放在了正文的底部。其他任何地方，它似乎没有工作？
@nora 你能把你的代码放在 SO 上吗？我认为代码中存在一些错误。
@Jalpesh pastebin.com/dcjiRPDL 我把它放在了一个粘贴箱里，因为它可能在这个评论中效果不佳。
@nora 你的问题解决了吗？？

【解决方案3】：

这是在 HTML 标记中包含外部 javascript 文件的方法。

<script type="text/javascript" src="/js/external-javascript.js"></script>

external-javascript.js 是要包含的外部文件。确保包含路径和文件名正确。

<a href="javascript:showCountry('countryCode')">countryCode</a>

上述方法对于锚标签是正确的，并且可以完美地工作。但对于其他元素，您应该明确指定事件。

例子：

<select name="users" onChange="showUser(this.value)">

谢谢， XmindZ

【讨论】：

关于<a> 标签的问题已经在here 和here 进行了广泛的讨论。尽管可以，但不建议将 Javascript 放入 href。

【解决方案4】：

注意：- 不要在外部 JavaScript 文件中使用 script 标签。

<html>
<head>

</head>
<body>
    <p id="cn"> Click on the button to change the light button</p>
    <button type="button" onclick="changefont()">Click</button>

     <script src="external.js"></script>
</body>

外部 Java 脚本文件：-

        function changefont()
            {

                var x = document.getElementById("cn");
                x.style.fontSize = "25px";           
                x.style.color = "red"; 
            }

【讨论】：

【解决方案5】：

您可以像这样在正文段中简单地添加 JavaScript：

<body>

<script src="myScript.js"> </script>
</body>

myScript 将是您的 JavaScript 的文件名。只需编写代码即可享受！

【讨论】：

欢迎来到 StackOverflow。请更具体并描述如何将 JavaScript 文件包含到 HTML 中。

【解决方案6】：

我希望这对这里的某人有所帮助：我遇到了一个问题，我需要使用 JavaScript 来操作一些动态生成的元素。在将代码包含到我在头部的 <script> </script> 标记之间引用的外部 .js 文件中并且它运行良好后，脚本中没有任何效果。尝试在 FF 上使用开发人员工具并返回保存新元素的变量的空值。我决定将我的脚本标签移动到 html 文件的底部，就在 </body> 标签之前，然后宾果游戏脚本的每个部分都开始再次正常响应。

【讨论】：