Question

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

2020-10-12

2260

javascript

我想通过从 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>

在 scripts.js 文件中

function data() {
    const data = "3";
    console.log('data');
}

执行此操作时，出现如下错误，

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

不确定是什么导致了该问题。有人可以帮我解决这个问题吗。谢谢。

编辑：

在“源”选项卡中，我看到了此信息

在“网络”选项卡中，我看到正在调用 scripts.13aae5c5.js 文件。

编辑 2：

我尝试创建一个 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>

在 scripts.js 文件中

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

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

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

Answer 1

基本上这里没有什么问题，除了你应该考虑在 JS 中绑定你的事件。但是：这看起来你的项目中有某种预处理器，如 webpack 或 browserify。

预处理器或打包程序会将您的代码包装在单独的范围内，以防止填满全局空间。

一个小例子：

// the code:

function data() {
  return 'some data'; 
}

// will be converted to something like this (Boiled down for understanding)

(function(){
  function data() {
    return 'some data'; 
  }
})()

(function(){ ... })() 被称为自执行函数，并将为您的代码提供封装。 javascript 中自执行函数的目的是什么？

<button onClick="data()">click</button> 另一方面需要全局范围内的方法 data ，或者准确地说：必须设置 window.data ！

所以你有两个选择：

将数据方法绑定到全局范围
使用 js 绑定你的事件

function data() {
  console.log('call to data');
}
// bind to global scope (not nice!)
window.data = data;

// onload method
function onload() {
  console.log('onload');
}
window.onload = onload;


// bind event using JS (Waaaay nicer!)
// wait for Dom is loaded: https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
  onload();
  // get the element
  const button = document.getElementById('test');
  if(button) {
    // bind event
    button.addEventListener('click', 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">
        <title></title>
        <link rel="stylesheet" href="src/styles.css">
        <script src="src/scripts.js"></script>
    </head>
    <body onload="onload()">
        <button id="test" onClick="data()">click</button>
    </body>
</html>