logo标签列表

从外部JavaScript文件中调用HTML中的函数

javascripthtml
10

这是一个简单实用的例子，但我不确定我做错了什么。
我在我的外部JavaScript文件中有以下代码:

function myname(){
    document.write("Monique");  
}

function welcomeW(name){
    document.write("Welcome " + name + "!");
}

function welcomeR(name){
    return "Welcome " name "!";
}

我添加了这个<script>标签来链接到我的html文件：

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

我尝试使用以下方式调用HTML中的函数：

<script> myname(); </script>
<script> welcomeW(Monique); </script>
<script> welcomeR(Monique); </script>

当我在HTML中编写函数时，它可以正常工作，但是在外部文件中却没有任何反应。

在外部文件中？它在哪里？错误在哪里？ - k102
你有许多错误……所有这些错误都将在你的浏览器开发者工具的控制台中报告。如果你使用了像JS Hint这样的工具，它们也会被报告。阅读错误信息。 - Quentin
你应该在 welcomeW('Monique') 的字符串中使用引号 "" 或 ''。 - Supersharp
7个回答
0
如果一个<script>有一个src，那么元素的文本内容将不会作为JS执行（尽管它将出现在DOM中）。
您需要使用多个脚本元素。
  • 一个<script>用于加载外部脚本
  • 一个<script>用于保存您的内联代码（包括对外部脚本中函数的调用）
0

你可能把 <script src="<your js file>" type="text/javascript"></script> 放在了 html 文件的错误位置。尝试将其放置在 <head></head> 或者在 body 结束标签 </body> 之前。

另一个常见错误是在 <script src="<your js file>" type="text/javascript"></script> 中输入文件路径时，要像这样输入： <script src="./index.js" type="text/javascript"></script> 如果您的 index.js 文件与 index.html 文件在同一个文件夹中。

希望对你有所帮助！

0
Monique，你的代码只有一个问题，请在传递参数时使用单引号（即 'Monique'）或双引号（"Monique"）。我想你可能会收到"Uncaught ReferenceError: Monique is not defined"的错误信息。
<script> myname(); </script>
<script> welcomeW("Monique"); </script>
<script> welcomeR("Monique"); </script>

或者使用这个。
<script> myname(); </script>
<script> welcomeW('Monique'); </script>
<script> welcomeR('Monique'); </script>
0

根据您的描述，您在HTML中正确地调用了函数并链接了JS文件。只是有一些小问题导致了错误。

  1. welcomeR函数有一个小语法错误。您可能会遇到“未捕获的SyntaxError：意外的标识符'name'”和“未捕获的ReferenceError：myname未定义”。需要在welcomeR的返回语句中字符串和名称之间加上“+”以解决此错误。使用console.log（）语句检查JS文件是否按预期运行。

  2. 当您在HTML文件中使用调用函数时，应该会发生“未捕获的语法错误”，其中Monique未定义。您只需要更改welcomeW和welcomeR函数，从

    <script> myname(); </script>
    <script> welcomeW(Monique); </script>
    <script> welcomeR(Monique); </script>

到

    <script> myname(); </script>
    <script> welcomeW("Monique"); </script>
    <script> welcomeR("Monique"); </script>

所以你正在传递字符串。

有了这个，你应该能够得到"MoniqueWelcome Monique!"作为你的输出。

  1. 最后一个函数welcomeR没有将任何内容输出到输出文件中，因为它返回一个字符串，并没有改变外部文件的内容。如果您希望它也输出到您的文件中，请写入

       welcomeR("Monique")

作为

  document.write(welcomeR("Monique"));
-1

你忘记在返回语句中加上 + 号了。你可以在脚本中直接调用函数。如果链接正确，那么它应该会起作用。

而且如果你不知道的话，return 不会打印/写入任何内容，它只会返回值。如果你想要打印/写入内容，你需要这样做。

var welcomeR = return "Welcome " + name + "!"; and document.write(welcomeR);


<script>
function myname(){
    document.write("Monique");  
}

function welcomeW(name){
    document.write("<br/>" +"Welcome " + name + "!" + "<br/>");
}

function welcomeR(name){
    return "Welcome " + name + "!";
}
myname();
welcomeW("Monique");
welcomeR("Monique");  
</script>

-1

1- 纠正一些语法错误。
2- 当您链接到 JavaScript 文件时，文档在加载之前看不到其中的函数，因此页面中的脚本标记在文件加载之前被执行

您可以通过以下方式解决问题

首先将 "defer" 属性添加到 JavaScript 链接文件中

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

然后您可以在您的HTML页面中编写此代码

document.onreadystatechange = () => {
    if (document.readyState === "complete") {
        myname();
        welcomeW("Monique");
        welcomeR("Monique"); 
    }
“纠正一些语法错误” — 什么语法错误？ - Quentin
首先，将“defer”属性添加到JavaScript链接文件中。这将通过延迟外部文件中JS的执行直到DOM准备就绪来解决您所说的问题。 - Quentin
我真的不确定document.onreadystatechange和defer之间的交互是什么，但我不会感到惊讶如果它延迟执行直到readyState处于最终状态，因此它永远不会更改并触发事件处理程序。 - Quentin
welcomeW("Monique"); — 在DOM完成后调用document.write将会擦除现有文档并替换为新的文档，而不是将写入的输出添加到正在解析以创建文档的流中。 - Quentin
你的 welcomeR 函数存在语法错误，你需要声明 Monique 变量。当使用 document.onreadystatechange 时，问题得到解决。 - Suhail Keyjani
-2
请确保将脚本函数调用放在脚本 src 标签之后。
问题的代码存在很多问题，但没有任何迹象表明脚本元素的顺序是其中之一。 - Quentin
当我在HTML中编写函数时，它可以正常工作，但在外部文件中却没有任何反应。 - sam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接