Question

我有一个js函数，可隐藏页面上的元素。我希望能够从其他js文件调用该函数。当我执行要求时，它会告诉我文档未定义。

index.html：

<img src='cid:EmailTop.png' style="display:block"/><br /><img src='cid:EmailBottom.png' style="display:block"/>

script.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="picture1">
        <img src="img.jpg" alt="img">
    </div> 

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

</body>

</html>

想在这里调用hide（）函数

main.js

function hide() {
    var x = document.getElementById("picture1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

Answer 1

对于节点js，您正在使用Common JS语法。从script.js文件中导出函数。

exports.hide = () => {
    var x = document.getElementById("picture1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

这是假设您要在服务器上进行导出和导入，即使用Node JS。如果要在浏览器上执行此操作，则需要使用ES6 AMD API，根据您的设置，可能需要添加诸如Browserify或Webpack之类的捆绑器以进行设置。

如@DarioK所建议的那样，如果您不使用节点js并导入/导出服务器端，则使用脚本标记可能会更容易。

如果您不熟悉使用节点js或ES6语法导入和导出函数/变量/对象，则有很多东西要学习和吸收，所以我认为最好暂时保持简单（即脚本标签）并随着时间的推移建立技能，但我建议您一定要学习它们。

Answer 2

您必须在（script.js）中使用脚本之前在html中包含脚本（main.js）。

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

您只需将其命名为同一个文件即可。

Answer 3

您需要检查的几点：

您显然是在浏览器中运行此程序（而不是标签中所指示的节点），并且浏览器没有内置require。您是否包含了诸如{{ 3}}？
使用require时，需要“导出”正在使用的所有功能：

function hide() { 
   // ...
}

mmodule.exports = { hide };

您定义的函数称为hide，但您将其称为hider。
您是否包括了main.js？

Answer 4

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

只需将两个文件都包含在您的html代码中 在main.js内部直接调用该函数hide（）;如果您要在HTML文件中同时包含两个js文件，则无需要求。只需维护文件的顺序即可。函数调用应该在函数声明之后。

从另一个JS文件调用JS函数

4 个答案: