函数未定义 node.js 未捕获引用错误答案

【问题标题】：Function is not defined node.js Uncaught Reference error函数未定义 node.js 未捕获引用错误
【发布时间】：2021-05-21 14:34:41
【问题描述】：

在我的 app.js 文件中，我定义了一个这样的函数：

function testfunc() {
    console.log("Testing");
}

在我的 home.html 文件中有这个：

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

<div class="ProfileImage" onmouseover="testfunc()"> </div>

但是当我将鼠标悬停在 div 上时，它会产生这个

Uncaught ReferenceError: testfunc is not defined

这是我的文件结构：

【问题讨论】：

我觉得应该是不带()的testfunc
@AhmedAlhameli — 不。提及包含函数的变量将无效
这和node.js有什么关系？
我需要澄清一下，因为这在本地有效。您是否将其部署到亚马逊？如果是这样，您是否仔细检查了文件是否部署到同一个文件夹？

标签： javascript html node.js amazon-web-services amazon-ec2

【解决方案1】：

确保您的 HTML 文件遵循以下结构。我无法准确回答，因为我无法获取您的 JS 日志

<html>

<head>
  ...
</head>

<body>
  ...
  <div class="ProfileImage" onmouseover="testfunc()">abcdefg</div>
  <script>
    function testfunc() {
      console.log("Testing");
    }
  </script>
</body>

</html>

【讨论】：

虽然没有必要包含./，但它并没有什么害处，因此不会产生影响
我什么都没问。我告诉你，你的答案是错误的。
app.js 是什么，它与 NodeJS 相关吗？
您的语法在某种程度上表明您正在混合使用 NodeJS 和浏览器端 JS
我认为你应该做的是将html文件和js文件放在同一个文件夹中然后测试

【解决方案2】：

确保您的 JS 文件与 HTML 文件位于同一目录中。否则找不到。

【讨论】：

它们在同一个目录中
检查你的函数名和你的js文件名。为了确保它被导入，请在您的 JS 文件中添加类似 alert("Hello from import"); 的警报
警报未显示。这是什么意思？
表示你的js文件命名不正确。您能否提供文件结构的屏幕截图？
我添加了目录截图

【解决方案3】：

你为什么忘记了互联网是异步的？您想从尚未加载的文件中运行函数吗？

如果你想以这种方式使用事件，JS代码必须嵌入到HTML中。

如果你想做正确的事，请阅读DOMContentLoaded（加载所有 HTML 后执行 JS）、addEventListener（事件记录）以及为什么应该将 JS 脚本附加到 HTML 末尾。

此外，我建议您对fetch ()（Ajax 替换）和document.querySelector (selectors);（而不是jQuery (selectors)）感兴趣。

【讨论】：

【解决方案4】：

编辑答案：

看起来文件app.js 没有加载到文件-home.html 中。确保您的 node.js 服务器同时提供两个文件 - app.js 和 home.html。

您可以通过打开以下网址进行验证：yourServerUrl:port/app.js 和 yourServerUrl:port/home.html

演示：click here

旧答案：

如问题 (node.js) 中所述，您似乎想从 home.html 文件中调用服务器端函数（即 testFunc()）。

为此，请按照以下步骤操作：

在您的app.js 文件中添加以下代码。此代码创建一个 HTTP 服务器来服务 home.html 和 testFunc()

const http = require("http");
const fs = require("fs");

function testfunc() {
  console.log("Testing");
}       

http.createServer(function (req, res) {

    if (req.url === "/testfunc") {
       testfunc(); //Trigger testfunc
       res.write("testfunc() triggered"); //return response to the client (optional)
       res.end();
    } else {
       //Return default web page
       fs.readFile(__dirname + "/home.html", function (err, data) {
         if (err) {
           res.writeHead(404);
           res.end(JSON.stringify(err));
           return;
         }
         res.writeHead(200);
         res.end(data);
       });           }

}).listen(8080);

在home.html 文件中添加以下代码。为了触发服务器端函数，我们使用了 AJAX 库。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <div
   class="ProfileImage"
   onmouseover="askServerToCallTestFunc()"
   style="width: 50px; height: 50px; background: red;"
 ></div>
 <script type="text/javascript">
   function askServerToCallTestFunc() {
     $.get("/testfunc", (resp) => {
       console.log("Response from server: ", resp);
     });
   }
 </script>

演示：click here

【讨论】：