“如何修复错误”；未捕获参考错误：未定义数据；使用javascript？_Javascript

“如何修复错误”；未捕获参考错误：未定义数据；使用javascript？

javascript

“如何修复错误”；未捕获参考错误：未定义数据；使用javascript？,javascript,Javascript,我想通过从index.html文件读取scripts.js文件中的函数，在单击按钮时将一些值记录到控制台上下面是我的代码在index.html中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

我想通过从index.html文件读取scripts.js文件中的函数，在单击按钮时将一些值记录到控制台上

下面是我的代码

在index.html中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <link rel="stylesheet" href="src/styles.css">
        <script src="src/scripts.js"></script>
    </head>
    <body>
        <button onClick="data()">click</button>
    </body>
</html>

在这样做的过程中，我会得到如下错误：

"uncaught reference error: data is not defined at HTMLButtonElement.onclick"

不确定是什么导致了问题。有人能帮我吗。谢谢

编辑：

在source选项卡中，我看到了这一点

在networks选项卡中，我看到正在调用scripts.13aae5c5.js文件

EDIT2:

我曾尝试创建一个id为message的div，并使用scripts.js文件中的js代码更改其内容，但效果良好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="src/styles.css">
</head> 
<body>
    <h2>here i am </h2>
    <div id="message"></div>
    <script src="src/scripts.js"></script>
    <button onclick="data">click</button>
</body>

它显示hello world消息，但单击按钮时会显示未捕获的引用错误数据未定义

基本上这里没有错误，除非您应该考虑在JS中绑定事件。但是：看起来您的项目中有一些预处理器，比如webpack或browserify

预处理器或打包器将把代码包装在一个单独的范围内，以防止填充全局空间

一个小例子：

//代码：
函数数据（）{
返回“一些数据”；
}
//将转换为类似的内容（为了理解而简化）
（功能（）{
函数数据（）{
返回“一些数据”；
}
})（）

脚本本身可以工作，尽管您尝试记录一个静态的

“数据”

字符串，而不是

常量数据的实际值。外部脚本文件（src/scripts.js
）的路径似乎不正确，其中data（）
是未定义的。此外，如果要记录data
变量，则需要使用console.log（data）而不是你的版本。正如@Lain所说的，检查包含的脚本文件的路径。谢谢。scripts.js文件位于src文件夹内，index.html文件位于src文件夹外。那么路径是否正确？如果使用chrome，请检查控制台和/或网络选项卡。两者都将显示是否找到该文件。在较旧的浏览器中，脚本
还需要类型
，语言
属性。感谢您的解释。但有一个疑问是，当我点击按钮时，它看起来像是调用了两次数据方法。当我们添加了click eventlistener时，是否需要使用onclick attr调用此数据方法？以及如何将此数据方法调用为body标记的onload attr？但这给出了一个不明确的定义。谢谢，是的。它被调用了两次，因为在本例中它被绑定了两次，因为我想向您展示两种方法；）为自己选择一个方法（请让它成为第二个），就像DOMContentLoaded
事件一样，您也可以在code:文档中绑定load
事件。addeventleistener（'load'，data）请在此处阅读ebent绑定：感谢您的回复。但是在body标记onload中调用data方法也会产生同样的错误。不知道怎么称呼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="src/styles.css">
</head> 
<body>
    <h2>here i am </h2>
    <div id="message"></div>
    <script src="src/scripts.js"></script>
    <button onclick="data">click</button>
</body>

function data() {
    console.log('data');
}

document.getElementById('message').innerText = "Hello World!";