在 es 模块环境下，`onblur="getfranchisefee()"` 这种内联事件处理方式无法直接调用模块中导入的函数（因作用域隔离），需改用 `addeventlistener` 在模块内部绑定事件，并确保 dom 加载完成后再执行。
要实现在用户离开输入框（blur）时准确获取其值，并与 ES 模块（type="module"）协同工作，关键在于避免内联 JavaScript，转而采用模块化、解耦且符合现代 DOM 操作规范的方式。
✅ 正确做法：模块内监听 + DOM 就绪保障
首先，修正 HTML：移除内联 onblur 属性，仅保留语义化结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>⚠️ 注意： 是无效类型，应改为 type="text"（或 number）。
然后，重构 GetElement.mjs（建议重命名为语义更清晰的 inputUtils.mjs）：
// inputUtils.mjs
export function getFranchiseFee() {
const input = document.getElementById('franchiseFee');
if (!input) return NaN;
return parseFloat(input.value) || 0;
}
// 可选：封装 blur 监听逻辑（推荐）
export function setupFranchiseFeeListener(callback) {
const input = document.getElementById('franchiseFee');
if (!input) {
console.warn('Input #franchiseFee not found');
return;
}
input.addEventListener('blur', () => {
const value = getFranchiseFee();
callback?.(value);
});
}最后，在 main.js 中导入并使用（务必等待 DOM 加载完成）：
// main.js
import { getFranchiseFee, setupFranchiseFeeListener } from './inputUtils.mjs';
// ✅ 推荐：在 DOMContentLoaded 后初始化，确保元素存在
document.addEventListener('DOMContentLoaded', () => {
// 方式 1：手动触发获取（例如调试用）
console.log('Initial value:', getFranchiseFee());
// 方式 2：绑定 blur 事件并响应
setupFranchiseFeeListener((value) => {
console.log('Franchise Fee on blur:', value);
// ✅ 此处可进行校验、计算、更新其他字段等业务逻辑
});
});? 常见错误与说明
- ❌ 内联事件（onblur="..."）在模块中不可用：模块脚本默认是严格模式，且全局作用域不共享 window 上的函数（除非显式挂载），因此 onblur="getFranchiseFee()" 会报 ReferenceError。
- ❌ 未等待 DOM 就绪就查询元素：若 main.js 在 中加载且未加 DOMContentLoaded，document.getElementById() 可能返回 null。
- ❌ type="input" 是非法属性：浏览器会忽略或降级为 type="text"，但应显式声明正确类型。
✅ 最佳实践总结
- 所有事件绑定统一在模块内部通过 addEventListener 完成；
- 使用 DOMContentLoaded 或将 <script type="module"> 放在 前，确保 DOM 可访问；</script>
- 封装可复用逻辑（如 getFranchiseFee）和副作用逻辑（如 setup...Listener）分离；
- 添加健壮性检查（if (!input)），避免运行时错误；
- 优先使用 type="number" 配合 inputmode="decimal" 提升移动端体验（注意：parseFloat 仍需兜底处理空值/非数字）。
这样即可安全、清晰、可维护地在模块化环境中响应 blur 事件并获取输入值。
