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）被认为是不好的做法（并且确实有实际的缺点，但这会导致过头）。相反，您应该使用 JavascriptsElement.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在标签上添加一个属性，要么将需要访问DOM的部分代码包装在一个DOMContentLoaded事件处理程序中：

// 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

你可以这样做。

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

我不知道 stackBlitz..

但是，我理解加载index.js

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