Stackblitz：onClick找不到我的功能

3 回答

• -1

  为什么它不起作用

  它无法工作的原因是Stackblitz背后有一个资产构建系统，它将您的Javascript代码视为 modules .

  这意味着在这些模块中定义的变量只能在这些模块中使用，并且 not 会附加到全局命名空间（正如您所期望的那样，似乎习惯了） .

  修复它所需的最低要求

  要实现这一点，您需要 explicitly 将这些变量附加到 global object ，这在浏览器中恰好是 window .

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

  window.test = test;
  

  更好的方法

  请注意，直接在元素上使用内联事件处理程序（如 onclick ）被认为是不好的做法（并且确实存在实际缺点，但这会导致太多） . 相反，您应该使用Javascripts 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);
  

  如何让它更安全，更好

  还有一点需要注意：如果将脚本标记加载到文档的 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 .

  回复于 2024-05-08T15:25:04+08:00
• 2

  你可以这样做 .

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

  我不知道stackBlitz ..

  但是，我理解加载index.js

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

  回复于 2024-05-08T15:25:04+08:00
• -1

  修改index.js文件中的测试函数声明：

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

  它无法识别click事件上的测试函数，因为您声明的测试函数不在同一范围内 .

  回复于 2024-05-08T15:25:04+08:00