使用JS模块时，如何通过onblur事件获取输入框的值？

核心问题 #

1. ES模块作用域隔离：模块内导出的函数默认不会暴露到全局作用域，HTML内联事件onblur="getFranchiseFee()"无法找到该函数。
2. 文件路径不匹配：main.js中导入的GetElement.mjs与实际模块文件名GetElements.mjs（多了字母s）不一致，导致模块加载失败。
3. DOM加载时机错误：main.js在<head>中加载执行时，<body>内的输入框还未渲染完成，直接调用getFranchiseFee()会获取到null，触发Cannot read properties of null错误。
4. 输入框类型错误：HTML中输入框的type="input"是无效值，应为type="text"。

完整修正方案 #

1. 修正模块文件名与导入路径

确保main.js的导入路径匹配实际模块文件名：

// main.js
import { getFranchiseFee } from './GetElements.mjs';

2. 替换内联事件为模块化事件监听（推荐）

移除HTML输入框的onblur属性，通过代码绑定事件，避免全局作用域污染：

<!-- 修正后的HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculadora de receitas e despesas</title>
  <script type="module" src="main.js"></script>
</head>
<body>
  <table>
    <tr>
      <td>Franchise Fee</td>
      <td class="value">
        <input type="text" class="form__field" placeholder="R$" name="franchise-fee" id='franchiseFee' required />
      </td>
    </tr>
  </table>
</body>
</html>

3. 完善模块函数与事件绑定

更新GetElements.mjs，移除冗余参数并处理空值/非数字情况：

// GetElements.mjs
function getFranchiseFee() {
  const franchiseFee = document.getElementById('franchiseFee');
  // 处理空输入或非数字，避免返回NaN
  return franchiseFee?.value ? parseFloat(franchiseFee.value) : 0;
}
export { getFranchiseFee };

在main.js中等待DOM加载完成后绑定事件：

// main.js
import { getFranchiseFee } from './GetElements.mjs';

// 等待DOM完全渲染后执行
document.addEventListener('DOMContentLoaded', () => {
  const feeInput = document.getElementById('franchiseFee');
  
  // 绑定blur事件
  feeInput.addEventListener('blur', () => {
    const feeValue = getFranchiseFee();
    console.log('Franchise Fee:', feeValue);
  });
});

备选方案：将函数挂载到全局作用域（不推荐）

如果一定要保留内联事件，可以在main.js中将函数挂载到window对象：

// main.js
import { getFranchiseFee } from './GetElements.mjs';
window.getFranchiseFee = getFranchiseFee;

// 同时等待DOM加载完成再初始化调用
document.addEventListener('DOMContentLoaded', () => {
  console.log(getFranchiseFee());
});

内容的提问来源于stack exchange，提问作者Mádan Ferreira