拆分JS模块后表单onsubmit触发Uncaught ReferenceError的解决方法

问题根源 #

当你把index.js作为ES模块引入时（比如HTML里用<script type="module" src="index.js"></script>），模块内部的函数和变量默认是私有作用域，不会自动挂载到全局window对象上。而HTML里的onsubmit="submitForm()"是在全局作用域查找这个函数，自然会报找不到的错误。另外你的submitForm函数声明了event参数，但HTML调用时没传，而且没阻止表单默认提交行为，就算找到函数也会直接刷新页面，看不到预期效果。

解决方法 #

方法一：手动挂载函数到全局（快速临时修复） #

修改index.js，把submitForm挂到window上，让全局作用域能找到它：

window.submitForm = (event) => {
  event.preventDefault(); // 必须加，阻止表单默认提交刷新页面
  console.log('submitForm triggered');
  const form = document.getElementById('form');
  const data = new FormData(form);
  const dataObject = {};
  for (const [key, value] of data.entries()) {
    dataObject[key] = value;
  }
  console.log(dataObject);
  return dataObject; 
}

另外注意把原代码里的console.log('submitForm:', here)中的here删掉或替换成实际变量，不然会触发新的未定义错误。

方法二：用addEventListener绑定事件（推荐，符合模块化规范） #

这种方法不需要在HTML里写onsubmit属性，完全通过JS绑定事件，避免全局作用域污染，更适合模块化开发：

1. 先修改HTML，移除onsubmit属性：

<form name="formFill" id="form">
  <button type="submit" id="calculate">Calculate</button>
</form>

2. 再修改index.js，通过事件监听绑定提交逻辑：

const form = document.getElementById('form');

const submitForm = (event) => {
  event.preventDefault();
  console.log('submitForm triggered');
  const data = new FormData(form);
  const dataObject = {};
  for (const [key, value] of data.entries()) {
    dataObject[key] = value;
  }
  console.log(dataObject);
  return dataObject; 
}

// 绑定表单提交事件
form.addEventListener('submit', submitForm);

这种方式不需要暴露函数到全局，代码更安全，也更便于后续维护。

额外提醒 #

确保你的index.js是通过type="module"引入的，比如：<script type="module" src="index.js"></script>，否则模块化的语法可能无法正常生效。

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