Stackblitz：onClick找不到我的功能

Question

我在输出警报的按钮中具有基本的onClick

function test(){
  alert('here');
}

<button onClick="test()">Press</button>

在StackBlitz中这不起作用-https://stackblitz.com/edit/js-umarwe?embed=1&file=index.js&hideNavigation=1

这是因为ES6

这在ES6中如何工作

Answer 1

为什么不起作用

不起作用的原因是Stackblitz背后有一个资产构建系统，该系统将Javascript代码视为模块。

这意味着这些模块中定义的变量仅在这些模块中内部可用，并且不能附加到全局名称空间（正如您期望的那样，并且似乎习惯了）。

修复该问题所需的最低要求

要实现此目的，您需要明确将这些变量附加到全局对象，该对象在浏览器中恰好是window。

只需在index.js文件的末尾添加以下行即可使代码正常工作：

window.test = test;

更好的方法

请注意，直接在元素上使用内联事件处理程序（如onclick）被认为是不好的做法（确实有实际缺点，但这会导致太多的后果）。相反，您应该使用Javascript Element.prototype.addEventlistener()函数。到达那里的步骤：

在按钮上添加id，以便Javascript可以找到它：

<button id="testButton">Press</button>

接下来，将该元素放在变量中：

var button = document.getElementById('testButton');

最后一步：为click事件添加事件监听器：

button.addEventListener('click', test)

以下是该重构版本的完整index.js：

// Import stylesheets
import './style.css';
function test(){
  alert('here');
}

var button = document.getElementById('testButton');
button.addEventListener('click', test);

如何使其更安全，更好

更多说明：如果将加载Javascript的脚本标签放置在文档的head部分中，则需要在标签上添加defer属性，或将需要在DOMContentLoaded事件处理程序中访问DOM的代码：

// Import stylesheets
import './style.css';
function test(){
  alert('here');
}

document.addEventListener('DOMContentLoaded', function () {
  var button = document.getElementById('testButton');
  button.addEventListener('click', test);
}

否则，当您的Javascript试图找到按钮并附加事件侦听器时，浏览器尚未解析HTML。

Answer 2

在 index.js 文件中

修改测试函数声明：

window.test = function(){
  alert('here');
}

由于您声明的测试功能不在同一范围内，因此无法识别click事件上的测试功能。

Answer 3

您可以执行此操作。

window.test = () =>{
  alert('here');
}

我不知道stackBlitz ..

但是，我知道加载index.js

所以window.test = () => {} ...