<script>标签能否同时设置两个type？模块化脚本onclick函数未定义如何解决

问题1解答 #

script标签不能同时设置两个type属性。HTML规范不允许同一个DOM节点存在重复的同名属性，即使强制写入两个type属性，浏览器也只会识别其中一个，无法同时实现模块化加载和普通脚本的全局作用域挂载效果。

问题2解答 #

完全可以在保留type="module"属性的前提下调用模块内的函数，你遇到的报错本质原因是：ES Module有独立的模块作用域，你在模块内部定义的printResult函数默认是模块私有变量，不会自动挂载到全局window对象上，而HTML内联的onclick事件会从全局作用域查找要执行的函数，自然会报未定义的错误。

你可以选择以下任意一种方案解决：

• 方案1：手动将需要全局调用的函数挂载到window对象
  在你的app.js文件中，定义完printResult函数后新增一行代码：

  window.printResult = printResult
  

  该方案不需要修改原有HTML的内联onclick代码，修改完JS即可正常执行。
• 方案2（更推荐）：放弃内联onclick，在模块内部绑定DOM事件
  先给按钮添加唯一标识，比如新增id属性：

  <button type="button" id="calcBtn">Calcular</button>
  

  然后在app.js中通过事件监听绑定点击逻辑：

  const calcBtn = document.querySelector('#calcBtn')
  calcBtn.addEventListener('click', printResult)
  

  该方案不需要污染全局作用域，也符合前端结构与行为分离的编码规范，可维护性更高。

内容的提问来源于stack exchange，提问作者Samuel Contreras