如何让HTML按钮点击时正常调用绑定的JavaScript函数？

你引入脚本的<script>标签加了type="module"属性，ES模块默认运行在独立的模块作用域，内部声明的函数、变量不会自动暴露到全局window对象。而写在标签属性里的内联onclick事件，只能访问全局作用域下的函数，运行时找不到myfunction，所以点击没有响应。打开Chrome开发者工具的Console面板，点击按钮时就能看到myfunction is not defined的明确报错。

任选一种即可：

• 移除module声明（不需要ES模块特性时用）
  直接删掉script标签的type="module"属性即可，普通脚本声明的函数会默认注册到全局作用域：

  <script src="script.js"></script>
  

• 保留模块特性，手动暴露全局函数
  如果你需要使用import/export等模块能力，在JS文件里手动把需要给内联事件调用的函数挂载到window对象上：

  function myfunction() {
    alert("hey");
  }
  window.myfunction = myfunction;
  

• 推荐写法：移除内联事件，在脚本内绑定
  内联onclick本身是过时的写法，模块化开发下推荐直接在脚本里获取DOM元素绑定事件，完全不需要依赖全局函数：
  先给目标按钮加个id方便定位：

  <button id="plusBtn">+</button>
  

  然后在JS文件里写事件绑定逻辑：

  function myfunction() {
    alert("hey");
  }
  
  // 等待DOM加载完成后再绑定事件，避免找不到元素
  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('plusBtn').addEventListener('click', myfunction);
  });
  

内容的提问来源于stack exchange，提问作者Tyler K