如何在HTML中调用外部JavaScript函数

Question

我有一小段无法运行的代码。我正在构建一个网站，第一次使用JavaScript。我把JavaScript代码放在一个外部文件'Marq_Msg.js'中，代码如下：

var Messages = new Array();
Messages[0] = "This is message 1";
Messages[1] = "This is message 2";
Messages[2] = "This is message 3";
Messages[3] = "This is message 4";  

function scroll_messages()
{
  for (var i = 0; i < Messages.length; i++)
        document.write(Message[i]); 
}

我在HTML文件 'Index.html' 中尝试这样调用它:

    <div id="logo">
        <marquee scrollamount="5" direction="left" loop="true" height="100%" width="100%">
        <strong><font color="white"><script src="Marq_Msg.js">scroll_messages()</script></font></strong>
        </marquee>
    </div>

“logo” div是我想滚动的CSS元素。如果我将代码嵌入到“head”标记中并调用它，则可以正常工作！我还想对此代码进行一些其他操作（例如略微间隔消息），但首先无法使该代码运行。我还尝试添加：

<script src="Marq_Msg.js"></script>

在 'head' 标签中使用单独的调用是不行的。我也尝试过改用以下方式：

<script type="text/javascript" src="Marq_Msg.js">scroll_messages()</script>

我甚至曾尝试让函数返回一个字符串（甚至硬编码了一个简单的“hello”来返回），但是无论是否使用'type'，都没有起作用：

//Marq_Msg.js
function scroll_messages()
{
   return "hello";
}

//index.html
<script type="text/javascript" src="Marq_Msg.js">document.write(scroll_messages())</script>

我错过了什么？非常感谢任何帮助！！我在Google上搜索了很久，但每个我找到的网站都想用一些“表单”来完成。我只想让消息横向显示，没有附加的表单。

- Kevin Fauver

---

<script type="text/javascript" src="Marq_Msg.js">scroll_messages()</script> 由于某种原因对我起作用了。 - Louis Waweru

Answer 1

如果 <script> 元素有一个 src 属性，那么该元素的文本内容将不会作为 JS 代码执行（尽管它会出现在 DOM 中）。

你需要使用多个 script 元素。

1. <script> 元素用于加载外部脚本。

2. <script> 元素用于保存你的内联代码（包括调用外部脚本中的函数）。

   
   
   scroll_messages();

- Quentin

---

更新：我做了一个更基本的页面，只包含滚动字幕...它可以工作。你的答案完美地解决了我的问题，非常感谢！！！我想这可能是字体颜色或者......我不知道什么原因。我会再试试的。再次感谢你。你不会认为它与所在的<div>标签有关系吗？ - Kevin Fauver

你好。我做了这个：我使用了两个脚本块，一个使用src="./functions.js"，另一个块使用在那里创建的一个函数：getAnswers(); - 但控制台显示该函数未定义...我不理解你的回答。您能添加更多细节吗？对不起，我也很新于JavaScript... - Raul Chiarella

Answer 2

在通俗易懂的语言中，您需要在HTML文件中引入外部js文件，然后可以直接从HTML页面调用编写在外部js文件中的JS方法。

请参照以下代码片段以了解详情：

caller.html

<script type="text/javascript" src="external.js"></script>
<input type="button" onclick="letMeCallYou()" value="run external javascript">

external.js

function letMeCallYou()
{
    alert("Bazinga!!!  you called letMeCallYou")
}

结果：

- codechefvaibhavkashyap

Answer 3

如果您仍然遇到引用错误，可能是因为您正在使用defer加载JavaScript，或者它位于body底部，因此当调用函数时，您的函数仍不存在。

- Ygor Perez de Oliveira