0

我想通过从 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 消息的 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 消息，但单击按钮时显示未定义未捕获的参考错误数据

4

1 回答 1

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>

于 2020-10-12T09:48:27.040 回答