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

calling functions in html from external javascript file

本文关键字：函数 HTML 调用 javascript 文件 从外部      更新时间：2023-09-26

这是一个简单的实用，但我不知道我做错了什么。
我有以下代码在我的外部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中编写函数时，它工作了，但在外部文件中什么也没有发生。

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>

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

你需要使用多个脚本元素

  • 一个<script>加载外部脚本
  • 一个<script>来保存您的内联代码(与调用函数in外部脚本)

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

另一个常见的错误是在<script src="<your js file>" type="text/javascript"></script>中尝试输入类似的位置，例如:如果您的index.js文件与index.html文件在同一文件夹中，则<script src="./index.js" type="text/javascript"></script>。

希望有帮助!

从你所描述的，你正在调用你的函数，并在Html中正确链接js文件。只有一些事情会导致错误。

  1. welcome函数有一点语法错误。您可能会遇到Uncaught SyntaxError: Unexpected identifier 'name'和* Uncaught ReferenceError: myname is not defined"。你需要有&;+&;在字符串和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!"作为您的输出。

  • 最后一个函数welcomeR没有将任何内容输出到输出文件中，因为它返回的是str，并且没有更改外部文件的内容。如果您希望将它也输出到文件中，请写入

       welcomeR("Monique")


    •   document.write(welcomeR("Monique"));

    您忘记了返回处的+。你可以在脚本中调用这些函数。如果你链接正确，那么它应该工作。

    如果你不知道。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-纠正一些语法错误。
    2-当你链接到javascript文件，文档网不能看到它的功能，直到它加载，所以脚本标签在你的页面预期文件已加载

    你可以这样做来解决问题

    首先添加"javascript链接文件属性

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

    那么你可以在你的HTML页面

    中写这段代码
    document.onreadystatechange = () => {
    if (document.readyState === "complete") {
        myname();
        welcomeW("Monique");
        welcomeR("Monique"); 
    }

    请确保将脚本函数调用放在脚本src标签之后。

    相关文章：